<el-table>设置一列为固定字段,其他列为循环生成

  <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="name"
        label="固定字段名"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in wordsColumns"
        :prop="item.name"
        :label="item.label"
        :key="index"
      >
      </el-table-column>
    </el-table>



const tableData = ref(
  [{
        date: '2016-05-02',
        id: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        id: '2',
        name:'章三',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        id: '3',
        name: '李四',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        id: '4',
        name: '王五',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
);

const wordsColumns = [
  { name: "name", label: "姓名" },
  { name: "address", label: "地址" },
  { name: "date", label: "时间" },
];


const formatter = (row, column) => {
      console.log(row, column)
      switch (row.id) {
        case '1':
          return '用户1'
        case '2':
          return '用户2'
        case '3':
          return '用户3'
        case '4':
          return '用户4'
      }
      let newName = '用户' + row.name
      return newName
};

页面展示:

相关推荐
m0_689618282 小时前
水凝胶发生器,不对称设计妙,医电应用前景广
笔记
Ace'2 小时前
每日一题&&学习笔记
笔记·学习
挥剑决浮云 -2 小时前
Linux 之 安装软件、GCC编译器、Linux 操作系统基础
linux·服务器·c语言·c++·经验分享·笔记
新晓·故知3 小时前
<基于递归实现线索二叉树的构造及遍历算法探讨>
数据结构·经验分享·笔记·算法·链表
魔理沙偷走了BUG3 小时前
【数学分析笔记】第4章第4节 复合函数求导法则及其应用(3)
笔记·数学分析
NuyoahC5 小时前
算法笔记(十一)——优先级队列(堆)
c++·笔记·算法·优先级队列
这可就有点麻烦了6 小时前
强化学习笔记之【TD3算法】
linux·笔记·算法·机器学习
Ljubim.te8 小时前
软件设计师——数据结构
数据结构·笔记
speop10 小时前
【笔记】I/O总结王道强化视频笔记
笔记·音视频