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

页面展示:

相关推荐
сокол39 分钟前
【网安-等保评测-基础记录】网络安全等级保护2.0 详解(定级、备案、测评、整改一站式指南)
网络·笔记·网络安全·云计算
qeen873 小时前
【算法笔记】模拟与高精度加减乘除
c++·笔记·算法·高精度·模拟
U盘失踪了3 小时前
什么是B/S 架构和 C/S 架构
笔记
像一只黄油飞4 小时前
第二章-02-注释
笔记·python·学习·零基础
xiebingsuccess4 小时前
ThingsPanel IoT Platform 学习笔记
笔记·学习
是上好佳佳佳呀4 小时前
【前端(七)】CSS3 核心属性笔记:单位、背景、盒子模型与文本换行
前端·笔记·css3
雾岛听蓝4 小时前
Qt 输入与多元素控件详解
开发语言·经验分享·笔记·qt
cwplh5 小时前
平衡树学习笔记
数据结构·笔记·学习·算法
EllinY6 小时前
扩展欧几里得算法 exgcd 详解
c++·笔记·数学·算法·exgcd
像一只黄油飞6 小时前
第二章-01-字面量
笔记·python·学习·零基础