el-table动态表格

最新推荐文章于 2025-06-19 10:56:00 发布

why_Because

最新推荐文章于 2025-06-19 10:56:00 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：备忘文章标签： javascript 前端 vue.js el-table动态列

本文链接：https://blog.youkuaiyun.com/qq_41287423/article/details/128565899

备忘专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在Vue.js中使用el-table组件创建行列都为动态数据的表格，适用于前端开发中灵活展示数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table动态表格，行列都为动态数据

  <template>
	<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">{{scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column 
      	v-for="(item,index) in titleData 
      	:key="index" 
      	:lable="item" 
      	:prop="keysData[index]"">
      </el-table-column>
      <el-table-column label="结果" width="50">
        <template slot-scope="scope">
        	<el-input v-model="scope.row.result"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </template>

<script>
    export default {
      data() {
        return {
          tableData: [{
            id001: '电流',
            id002: '电压',
            id003: '电阻'
          }, {
            id001: '0.1',
            id002: '0.2',
            id003: '0.3'
          }, {
            id001: '0.11',
            id002: '0.22',
            id003: '0.33'
          }, {
            id001: '0.111',
            id002: '0.222',
            id003: '0.333'
          }],
          titleData : [],
          keysData : []
        }
      },
      mounted(){
      	this.divisor();
      },
      methods:{
      	divisor(){
      		var object = this.tableData[0];
      		this.titleData = Object.values(object);
      		this.keysData = Object.keys(object);
      		this.tableData = this.tableData.splice(1);
      	}
      }
    }
  </script>