vue element-ui el-tag 改改

<!-- 原来的代码量-->
<el-table-column prop="available" label="企业状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.available ===1? 'success' : 'danger'" disable-transitions>{{scope.row.available ===1? '有效' : '无效'}}</el-tag>
        </template>
</el-table-column>

<!-- 修改后-->
<el-table-column prop="available" label="企业状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.available | filters('availableType')">{{ scope.row.available | filters('availableValue')}}</el-tag>
        </template>
 </el-table-column>

先利用filter进行封装 filters.js代码:

/*
 * @Author: Jonathan
 * @Date: 2021-07-29 15:10:43
 * @LastEditors: Jonathan
 * @LastEditTime: 2021-11-03 11:40:20
 * @Descripttion:过滤器
 * @FilePath: \simplify-fkyun-ui\src\utils\filters.js
 */
export default {
  // available el-tag类型转换
  availableType (status) {
    const statusMap = { 1: 'success', 0: 'danger' }
    return statusMap[status]
  },
  // available 状态值显示转换
  availableValue (status) {
    const statusMap = { 1: '有效', 0: '无效' }
    return statusMap[status]
  }
}

再main.js代码，全局引用filters.js文件

import filters from '@/utils/filters.js'