element+vue使用:formatter

作用：对表格列的数据状态展示，根据数据展示不同的状态

效果图：


1. 新建config.js文件

export const deviceStatusList = [{
        label: "未注册",
        value: "0",
    },
    {
        label: "已注册",
        value: "1",
    },
    {
        label: "已绑定",
        value: "2",
    },
]

export const onlineStatusList = [{
        label: "在线",
        value: "1",
    },
    {
        label: "离线",
        value: "0",
    },
]

2. 引入使用

<template>
  <el-table border
          :data="tableData"
          header-row-class-name="iot-table-header"
          height="100%">
    <template slot="empty">
      <el-empty description="暂无数据"></el-empty>
    </template>
    <el-table-column type="index"
                     align="center"
                     label="序号"
                     width="60"></el-table-column>
    <el-table-column prop="id"
                     label="设备ID"
                     min-width="100"></el-table-column>
    <el-table-column :formatter="deviceStatusFormatter"
                     prop="deviceStatus"
                     label="设备状态"
                     min-width="140"></el-table-column>
    <el-table-column prop="onlineStatus"
                      label="在线状态"
                      min-width="100">
       <template slot-scope="scope">
         <div class="onlineStatus"
              :class="scope.row.onlineStatus === '1' ? 'active-onlineStatus' : ''">
           <div class="circle"></div>
           <span style="marginleft: 5px">{{formatOnlineStatus(scope.row)}}</span>
         </div>
       </template>
     </el-table-column>
     <el-table-column prop="onlineStatus"
                      label="操作"
                      min-width="200">
       <template slot-scope="scope">
         <el-button @click="handleClick(scope.row)"
                  type="info"
                  :size="$formSize"
                  icon="el-icon-document">详情</el-button>
       </template>
     </el-table-column>
  </el-table>
</template>

<script>
import { deviceStatusList, onlineStatusList } from "@/views/equipment/config"

export default {
  data () {
    return {
      deviceStatusList,
      onlineStatusList,
      tableData: [
        { id: '123', deviceStatus: '0',  onlineStatus: '0' },
        { id: '123', deviceStatus: '1',  onlineStatus: '1' }
      ]
    }
  },
  methods: {
    deviceStatusFormatter ({ deviceStatus }) {
      const item = this.deviceStatusList.find((item) => item.value === deviceStatus);
      return item?.label;
    },
    formatOnlineStatus (row) {
      const item = this.onlineStatusList.find((item) => item.value === row.onlineStatus);
      return item?.label;
    },
  }
}
</script>

<style lang="scss" scoped>
.circle {
  width: 8px;
  height: 8px;
  background: #c0c4cc;
  border-radius: 50%;
  margin-right: 8px;
}
.onlineStatus {
  text-decoration: line-through;
  display: flex;
  align-items: center;
}

.active-onlineStatus {
  text-decoration: none;
  color: #16d182;
  .circle {
    background: #16d182;
  }
}
</style>

有输入提示：