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

页面展示:

相关推荐
ReedFoley3 小时前
【笔记】动手学Ollama 第五章 Ollama 在 LangChain 中的使用 - Python 集成
笔记·langchain
Mr Sorry9 小时前
Non-stationary Diffusion For Probabilistic Time Series Forecasting论文阅读笔记
论文阅读·笔记
南猿北者10 小时前
Cmake学习笔记
笔记·学习·策略模式
码小文10 小时前
Altium Designer 22使用笔记(8)---PCB电气约束设置
笔记·嵌入式硬件·硬件工程·ad22
UserNamezhangxi13 小时前
kotlin 协程笔记
java·笔记·kotlin·协程
翻滚的小@强16 小时前
数据挖掘笔记:点到线段的距离计算
人工智能·笔记·数据挖掘
会思考的猴子16 小时前
UE5 PCG 笔记(二) Difference 节点
笔记·ue5
yuxb7316 小时前
Linux 文本处理与 Shell 编程笔记:正则表达式、sed、awk 与变量脚本
linux·笔记·正则表达式
饕餮争锋20 小时前
设计模式笔记_行为型_访问者模式
笔记·设计模式·访问者模式
不羁。。1 天前
【撸靶笔记】第七关:GET - Dump into outfile - String
数据库·笔记·oracle