<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
};

页面展示:

相关推荐
_im.m.z3 小时前
【设计模式学习笔记】1. 设计模式概述
笔记·学习·设计模式
胡西风_foxww5 小时前
【ES6复习笔记】迭代器(10)
前端·笔记·迭代器·es6·iterator
左漫在成长6 小时前
王佩丰24节Excel学习笔记——第十九讲:Indirect函数
笔记·学习·excel
纪伊路上盛名在7 小时前
Max AI prompt1
笔记·学习·学习方法
Suwg2097 小时前
【MySQL】踩坑笔记——保存带有换行符等特殊字符的数据,需要进行转义保存
数据库·笔记·mysql
胡西风_foxww7 小时前
【ES6复习笔记】对象方法扩展(17)
前端·笔记·es6·对象·方法·扩展·对象方法扩展
左漫在成长8 小时前
王佩丰24节Excel学习笔记——第十八讲:Lookup和数组
笔记·学习·excel
代码小将8 小时前
PTA数据结构编程题7-1最大子列和问题
数据结构·c++·笔记·学习·算法
annesede8 小时前
计算机操作系统与安全复习笔记
笔记
滴_咕噜咕噜8 小时前
学习笔记 --C#基础其他知识点(持续更新)
笔记·学习·c#