elementUI vue 在table中根据不同数据实现不同的tag

首先我们要实现的效果如下

一般来讲  我们在后台构造数据的时候都是要用一个flag值来规定该字段的状态 如图

寻找开发文档 可以找到一个这样的demo

所以查看源码可以知道 我们关键点在于el-tag标签处

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          close-transition>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      }
    }
  }
</script>

 

于是可以按照demo照猫画虎的写道自己的代码之中

html

<el-table-column
        prop="bindStatus"
        label="监控使用状态"
        width="300"
        :filters="[{ text: '未关联设备', value: 0 }, { text: '已关联设备', value: 1 }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.bindStatus|getBindStatus"
            close-transition>{{scope.row.bindStatus|getBindText}}</el-tag>
        </template>
</el-table-column>

javascript

 

 filters: {
            //tag类型
            getBindStatus(bindStatus) {
                const bindColor = {
                    0: 'danger',
                    1: 'success',

                };
                return bindColor[bindStatus]
            },
            //颜色名称
            getBindText(bindStatus) {
                const bindColor= {
                    0: '未关联设备',
                    1: '已关联设备',

                };
                return bindColor[bindStatus]
            }


        },

我们在el-tag标签中   设定两个过滤器  一个过滤器过滤颜色  一个过滤器过滤文本

这样  设置好过滤器便可以获取到自己想要tag标签效果了