element-ui中关于表格中对数据的特殊处理

element-ui中关于表格中对数据的特殊处理

需求

原数据：
dataList = [
{
date: “2019-09-05”，
company：“正华”
yg: “0”
name: “一站”
al: " 6:2；5:1；3:2；4:2；10:1；9:0；2:1；1:2；"，
place：“河南省郑州市”
}, {…}
]

数组中每个对象的yg、al 属性含义：2 表示报警，：1表示预警，：0表示正常
要求一： al: “6:2;5:1;3:2;4:2;10:1;9:0;2:1;1:2;”
取出“：”（冒号前的数字）表示几号设备

要求二： yg: “0”
和al字段共同放在一个单元格中，将数字转为所代表的汉字含义

整体效果：
al+yg部分

代码部分

1.html部分

<el-table :data="dataList" border" >
      <el-table-column label="序号" type="index" ></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="pname"  label="公司"></el-table-column>
      <el-table-column label="预报警信息">
      // 使用插槽 slot 数据都在scope.row里取，al处理复杂需要方法处理，yg直接在html里v-if判断即可
          <template slot-scope="scope">
            <p v-html="scope.row.al"></p>
            <p>
              <span v-if="scope.row.yg == '1'"><i class="el-icon-warning yellow-icon"></i>油管预警</span>
              <span v-if="scope.row.yg== '2'"><i class="el-icon-warning red-icon"></i>油管报警</span>
            </p>
          </template>
      </el-table-column>
      <el-table-column prop="place" label="地区"> </el-table-column>
      <el-table-column prop="date" label="时间"></el-table-column>
    </el-table>

2.js部分

第一：
在method（）里定义数据处理函数：借用Table-column Attributes：
formatter 用来格式化内容 Function(row, column, cellValue, index)
稍有改变

alFormat(row) {
   
      // 检索出几号预警或报警或同时预报警
        let yj = []
        let bj = []
        let al = row.al