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

页面展示:

相关推荐
Wanderer X1 小时前
MiniMax-H3(ref2va)架构与推理方法笔记
笔记
深圳老胡2 小时前
STM32C562RET6 外部中断详解:从 EXTI 原理到 GPIO 外部中断实战
笔记·stm32·单片机·代码规范·1024程序员节
海绵宝宝转agent2 小时前
leetcodehot100个人题解
java·笔记·学习·算法
李某学编程16 小时前
基于ARM的微机原理学习笔记(一)
arm开发·笔记·学习
sbjdhjd17 小时前
AI产业周度动态:从“更强模型”走向“可执行、可治理、可计价”的系统竞争 (2026年10月19日—10月25日)
人工智能·笔记·ai·开源·gemini·信息差·claude code
ss27318 小时前
AI时代首先数据库-PostgreSQL实战笔记 27 PostgreSQL数据写入与读取流程解析
数据库·笔记·postgresql
深圳老胡19 小时前
压力检测空吸功能硬件方案全解析:主流压力传感器品牌与实现路径
笔记·单片机·代码规范
程序猿追19 小时前
返回 null 不一定入队成功:鸿蒙 KMP上的并发优先队列观察笔记
笔记·华为·harmonyos·kmp
崔高杰20 小时前
【多论文阅读笔记】下一阶段,Agent记忆关注什么能力?
论文阅读·笔记
ms72wx20 小时前
Docker 命令学习笔记:从入门到进阶的实战指南
笔记·学习·docker