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

页面展示:

相关推荐
四月天432 小时前
web安全-SSTI(服务器模板注入)
笔记·学习·web安全·网络安全
疯狂打码的少年3 小时前
【操作系统】虚拟存储管理(局部性原理、缺页中断)
笔记
NULL指向我3 小时前
TMS320F28379D笔记5:CAN通信多邮箱配置
笔记
aaaameliaaa4 小时前
进制练习题【找出只出现一次的数字、交换两个变量(不创建临时变量)、统计二进制中1的个数、打印整数二进制的奇数位和偶数位、求两个数二进制中不同位的个数】
c语言·数据结构·笔记·算法
RainCity6 小时前
Java Swing 自定义组件库分享(十三)
java·笔记·后端
llllliznc8 小时前
LLM 学习笔记 Day 5:Agent 核心组件——Planner、Memory 与 Reflection
笔记·学习
risc1234568 小时前
“解决了什么痛点”与“为什么有这个东西”的关系?
笔记
hj2862518 小时前
Docker 容器化技术标准化笔记
java·笔记·docker
hyhsandy18038 小时前
STM32F103 TIM学习笔记
笔记·stm32·学习
栈溢出了8 小时前
Redis 消息队列笔记:List 与 Pub/Sub
redis·笔记·list