vue中el-table格式化el-table-column内容的三种方法

目录
  • el-table格式化el-table-column内容
  • 一、template scope 、v-if判断
  • 二、利用formatter、slot属性
  • 三、但这些对我当前的情况，并不适用。所以，后来发现一个好方法。将两种方法结合起来，使用slot，自定义 formatter.（自定义）灵活应用就好啦
  • 博文参考：

el-table格式化el-table-column内容

遇到一个需求，一个循环展示的table中的某项，或者某几项需要格式化。对于格式化的方法，主要有template scope、formatter；

一、template scope 、v-if判断

<el-table-column prop="cyxb" label="性别">
    <template slot-scope="scope">
        <span v-if="scope.row.cyxb == 0">男</span>
        <span v-if="scope.row.cyxb == 1">女</span>
    </template>
</el-table-column>

二、利用formatter、slot属性

查看帮助文档

 <el-table-column prop="xb1" label="成员性别1"  width="120" :formatter="Formatter">

Formatter(row, column){
    if(row.xb == 0){
        return "男"
    }else if(row.xb == 1){
        return "女"
    }
}

三、但这些对我当前的情况，并不适用。所以，后来发现一个好方法。将两种方法结合起来，使用slot，自定义 formatter.（自定义）灵活应用就好啦

<el-table-column
    v-for="column in cbdksTableColumns"
    :prop="column.field"
    :label="column.label"
    sortable="custom"
    :key="column.field"
    min-width="200"
>
   <template slot-scope="scope">
        <div v-if="column.field == 'cyxb'">
            <span v-html="xbFormatter(scope.row.cyxb, scope.column.property)"></span>
        //将表格数据格式化后，再用 template + v-html 展示出来
        </div>
       //<div v-else-if="column.field == 'qqfs'">中间还可以加好多判断，从此针对某列的值进行格式化。
       <div v-else>
           {{ scope.row[scope.column.property] }}//千万不要忘啦！！！
       </div>
   </template>
</el-table-column>

//之前的代码取数据比较复杂，简化代码，便于理解。
xbFormatter(value, row) {
    //性别
    let cyxbvalue = value;
    if (cyxbvalue == null || cyxbvalue == "" || cyxbvalue == undefined) {
        return cyxbvalue;
     } else {
        let dycyxb = this.xbOptions.filter((item) => item.value === cyxbvalue);//filter过滤方法（看自己的情况、需求）
        return dycyxb[0].label;//rerun的内容即为要在表格中显示的内容
    }
},

此处xbOptions是调用后台接口返回的数据，组织结构为

this.xbOptions.push({ label: mj.mjmc, value: mj.mjz });

返回结果

当然xbOptions也可直接在data中静态定义。也可不定义，直接在return返回想要显示的内容也可。

当然这个方法中，不仅仅if语句，自行判断的语句都在这，判断完返回结果就欧克了。

文章就写到这了，多多运用就明明白白啦。

博文参考：

https://www.jb51.net/article/259218.htm

https://blog.csdn.net/chenmi8205/article/details/100626570

到此这篇关于vue中el-table格式化el-table-column内容的三种方法的文章就介绍到这了,更多相关el-table格式化el-table-column内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

  • antd vue table表格内容如何格式化

    antd vue table表格内容如何格式化

    目录 antd vue table表格内容格式化 如下面的性别和打印状态 antd table表格组件基本使用 借用官方文档数据,展示下Demo antd vue table表格内容格式化 目前在学习使用ant-design-vue,遇到table内容需要格式化 如下面的性别和打印状态 操作如下 columns中 { title: "性别", dataIndex: "sex", align: "center", width: 80, scoped

  • vue中el-table格式化el-table-column内容的三种方法

    vue中el-table格式化el-table-column内容的三种方法

    目录 el-table格式化el-table-column内容 一.template scope .v-if判断 二.利用formatter.slot属性 三.但这些对我当前的情况,并不适用.所以,后来发现一个好方法.将两种方法结合起来,使用slot,自定义 formatter.(自定义)灵活应用就好啦 博文参考: el-table格式化el-table-column内容 遇到一个需求,一个循环展示的table中的某项,或者某几项需要格式化.对于格式化的方法,主要有template scope.

  • vue中实现点击空白区域关闭弹窗的两种方法

    1. 第一种做法 首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现 <div class="selectedBorder" ref="main"> <div class="bankItem" v-if="bankSwitch == true"> 你好我是弹窗里面的内容部分 </div> </div>

  • Vue中父组件向子组件传递数据的几种方法

    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or

  • 如何在Vue中使用CleaveJS格式化你的输入内容

    What's CleaveJS? CleaveJS是最近github上的一个热门项目,在短短的一个多月中star数达到了2500+,且保持着强劲的上升势头.它的主要目的是 Format input text content when you are typing 格式化你的输入内容 可以查看官方的在线DEMO进行体验. Vue-Cleave 官方的CleaveJS只提供了 原生JS 和 ReactJS 版本的,看样子也准备出 AngularJS 版的了.但是当我把 VueJS 版本的pullre

  • VS中C#读取app.config数据库配置字符串的三种方法

    关于VS2008或VS2005中数据库配置字符串的三种取法 VS2008建立Form程序时,如果添加数据源会在配置文件 app.config中自动写入连接字符串,这个字符串将会在你利用DataSet,SqlDataAparter,SqlConnection等控件时如影随行地提示你让去选择,或者是新建字符串.如果要用代码的方式取得这个字符串则有三种方式: app.config内容: <?xml version="1.0" encoding="utf-8" ?&g

  • C#、.Net中把字符串(String)格式转换为DateTime类型的三种方法

    方式一:Convert.ToDateTime(string) 复制代码 代码如下: Convert.ToDateTime(string) 注意:string格式有要求,必须是yyyy-MM-dd hh:mm:ss 方式二:Convert.ToDateTime(string, IFormatProvider) 复制代码 代码如下: DateTimeFormatInfo dtFormat = new System.GlobalizationDateTimeFormatInfo(); dtFormat

  • vue中锚点的三种方法

    第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 组件: <template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow"

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • vue中阻止click事件冒泡,防止触发另一个事件的方法

    使用vue阻止子级元素的click事件冒泡,很简单,用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法. 以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部

  • vue中当图片地址无效的时候,显示默认图片的方法

    web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况.这时候,图片就会显示一个叉. 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址. <img :src="item.img" @error="imgError(item)" /> 给图片添加一个error校验,当图片加载失效的时候,就会调用该属性

随机推荐