动态获取填充表格数据时的特定值的赋值

1、如图

<el-table
          v-loading="loading"
          :data="columnList"
          border
          tooltip-effect="dark"
          :size="tableSize"
          :height="tableHeight"
          style="width: 100%; margin: 15px 0"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <template v-for="(item, index) in tableColumns">
            <el-table-column
              v-if="item.show"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              align="center"
              show-overflow-tooltip
            />
          </template>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-popover placement="left" trigger="click">
                <el-button
                  v-hasPerm="['metadata:datacolumn:detail']"
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleDetail(scope.row)"
                  >详情</el-button
                >
                <el-button slot="reference">操作</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

2、注意 tableColumns里的 formatter: this.keyFormatter

data() {
    return {
      activeName: 'first',
      tableHeight: document.body.offsetHeight - 310 + "px",
      // 展示切换
      showOptions: {
        data: {},
        showList: true,
        showDetail: false,
      },
      // 遮罩层
      loading: true,
      // 表格头
      tableColumns: [
        { prop: "columnName", label: "字段名称", show: true },
        { prop: "columnComment", label: "字段注释", show: true },
        {
          prop: "columnKey",
          label: "是否主键",
          show: true,
          formatter: this.keyFormatter,
        },
        {
          prop: "columnNullable",
          label: "是否允许为空",
          show: true,
          formatter: this.nullableFormatter,
        },
        { prop: "dataType", label: "数据类型", show: true },
        { prop: "dataLength", label: "数据长度", show: true },
        { prop: "dataPrecision", label: "数据精度", show: true },
        { prop: "dataScale", label: "数据小数位", show: true },
        { prop: "dataDefault", label: "数据默认值", show: true },
      ],
      // 默认选择中表格头
      checkedTableColumns: [],
      tableSize: "medium",
      // 表格数据
      columnList: [],
      // 总数据条数
      total: 0,
      // 左侧树
      treeOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

3、keyFormatter

keyFormatter(row, column, cellValue, index) {
      if (cellValue === "1") {
        return "Y";
      } else {
        return "N";
      }
    },
1
2
3
4
5
6
7