vue element-ui表格table 表格动态 添加行、删除行、添加列、删除列 自定义表头

vue table表格动态 添加行、删除行、添加列、删除列 自定义表头； 

增加一行、删除一行、添加一列、删除一列；每行带输入框input

代码

1、HTML部分：

<template>
  <div class="app-container">
    <el-table :data="tableData" border style="width: 600px; margin-top: 20px">
      <el-table-column v-for="item in columnData" :label="item.label" :prop="item.prop" :width="item.width">
        <template slot-scope="scope">
          <span v-if="scope.row[item.prop] !== null">
            <el-input v-model="scope.row[item.prop]"></el-input>
          </span>
          <span style="color: red; cursor: pointer;" v-else @click="deleteColumns(item.prop)">删除列</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteRows(scope)" v-if="scope.$index < tableData.length - 1" type="text" size="small">删除行
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button type="text" @click="addRows()">增加行</el-button>
    <el-input v-model='columnLabel' style="width: 200px" placeholder="请输入要增加的列名label"></el-input>
    <el-button type="text" @click="addColumn()">增加列</el-button>
  </div>
</template>

2、JS 部分：

<script>
export default {
  name: "Index",
  data() {
    return {
      columnLabel: '', //要增加的列名
      columnPropIndex: 0, //列属性自增
      columnData: [],//列标题数组
      tableData: [{}] //表格数据
    };
  },
  methods: {

    //添加行
    addRows() {
      const circle = this.tableData[0]; //取出数组中第一个对象
      if (circle) {
        const newObj = {};
        for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
          newObj[key] = '';
        }
        this.tableData.splice(this.tableData.length - 1, 0, newObj);
      }
    },

    //删除行
    deleteRows(scope) {
      this.tableData.splice(scope.$index, 1);
    },

    //添加列
    addColumn() {

      if (this.columnLabel) {
        const _this = this;
        // 1、//列标题数组中 增加一个标题
        const columnObj = {};
        var propStr = 'items'; //自定义一个列属性；
      
        columnObj.prop = propStr + this.columnPropIndex; //拼接自增数
        columnObj.label = this.columnLabel;
        this.columnData.push(columnObj);
        _this.columnPropIndex++; //自增数每次加一

        //2、数据包中每个对象增加一个生成的新属性
        _this.tableData.forEach(function (item, index) { //遍历数据包
          //每个对象新加一个属性 每一行数据值默认给''
          if (index < (_this.tableData.length - 1)) {
            _this.$set(item, columnObj.prop, '');
          } else {
            //最后一个给null  才会是删除列的按钮 不然是输入框
            _this.$set(item, columnObj.prop, null);

          }
        });

      }
    },

    //删除列
    deleteColumns(property) {
      const _this = this;
      // 你想删除属性:property
      _this.tableData.forEach(function (item, index) { //遍历数组中的每个对象 删除指定的属性
        _this.$delete(item, property);

      });
      // 2、删除表头数组里的数据
      _this.columnData.forEach(function (item, index) {
        if (item.prop === property) {
          _this.columnData.splice(index, 1);
        }
      });

    },


  },
};
</script>