el-table实现根据列数和数据动态渲染可编辑的表

需求

1. 列的个数和内容随机
2. 每行可编辑

实现

网页代码

<el-table
  :data="tableData"
  style="width: 100%"
  height="700px">
  <!-- 这是复选框 -->
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  <!-- 根据 column 数组内容动态渲染的列，通过 v-for -->
  <el-table-column
    width="150px"
    v-for="item in column"
    :key="item"
    :label="item">
     <template slot-scope="scope">
        <!-- 这个 el-input 是编辑用的，通过 v-if="edit" ，edit 为 true 显示 el-input 元素 -->
        <el-input size="small" v-model="tableData[scope.$index][item]" v-if="edit"></el-input>
        <!-- 这是显示文字的而不是编辑框，通过 v-else 选择渲染 -->
        <div class="center" v-else>{{scope.row[item]}}</div>
     </template>
   </el-table-column>
</el-table>

scope.$index 为行号，所以 tableData[scope.$index] 表示一行的数据
tableData[scope.$index][item] 为 item 列

{{scope.row[item]}}中，scope.row 也表示一行的数据，scope.row[item] 为 item 列

数据

export default {
    name: "table",
    data() {
    	edit: false,
    	column: ['col1', 'col2', 'col3'],
		tableData：[{
			col1: 'hhhhh',
			col2: '12',
			col3: 'zh'
		}]
    }
}

其他

编辑功能还需要其他逻辑和组件才能实现，比如一个按钮及点击事件等，靠你自己发挥了！

结尾

如果觉得有帮助，给我点个赞吧，阿里嘎多