动态增加行列

<template>

  <div class="app-container">

    <el-row>

      <el-col :span="24">

        <el-input

          clearable

          v-model="columnLabel"

          style="width: 200px"

          placeholder="请输入要增加的列名"

        ></el-input>

        <el-button type="text" @click="addColumn()">增加列</el-button>

        <el-button type="text" @click="addRows()">增加行</el-button>

        <el-button type="text" @click="hqColumn()">获取数据</el-button>

        <el-button type="text" @click="bcmbColumn()">保存模板</el-button>

        <el-button type="text" @click="mbColumn()">触发模板</el-button>

      </el-col>

    </el-row>

    <el-col :span="24">

      <div class="grid-content bg-purple-dark">

        <el-table

          :data="tableData"

          border

          style="width: 100%; margin-top: 20px; min-width: 300px"

        >

          <el-table-column

            v-for="(item, index) in columnData"

            :label="item.label"

            :prop="item.prop"

            width="300"

            :key="index"

            align="center"

          >

            <template slot-scope="scope">

              <span v-if="scope.row[item.prop] !== null">

                <!-- <el-input v-model="scope.row[item.prop]"></el-input> -->

                <el-select

                  multiple

                  v-model="scope.row[item.prop]"

                  filterable

                  placeholder="请选择"

                >

                  <el-option

                    v-for="item in options"

                    :key="item.value"

                    :label="item.label"

                    :value="item.value"

                  >

                  </el-option>

                </el-select>

              </span>

              <i

                class="el-icon-delete"

                v-else

                @click="deleteColumns(item.prop)"

              ></i>

            </template>

          </el-table-column>

          <el-table-column fixed="left" label="操作" width="100" align="center">

            <template slot-scope="scope">

              <i

                v-if="scope.$index < tableData.length - 1"

                class="el-icon-delete"

                @click="deleteRows(scope)"

              ></i>

            </template>

          </el-table-column>

        </el-table></div

    ></el-col>

  </div>

</template>

 <script>

export default {

  name: "Index",

  data() {

    return {

      columnLabel: "", //要增加的列名

      columnPropIndex: 0, //列属性自增

      columnData: [], //列标题数组

      tableData: [{}], //表格数据

      options: [

        {

          value: "选项1",

          label: "黄金糕",

        },

        {

          value: "选项2",

          label: "双皮奶",

        },

        {

          value: "选项3",

          label: "蚵仔煎",

        },

        {

          value: "选项4",

          label: "龙须面",

        },

        {

          value: "选项5",

          label: "北京烤鸭",

        },

      ],

    };

  },

  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.label = this.columnLabel;

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

        }

      });

    },

    hqColumn() {

      console.log(JSON.stringify(this.tableData));

      console.log(JSON.stringify(this.columnData));

    },

    mbColumn() {

      this.tableData = [

        { items0: [], items1: [], items2: [], items3: [] },

        { items0: [], items1: [], items2: [], items3: [] },

        { items0: [], items1: [], items2: [], items3: [] },

        { items0: [], items1: [], items2: [], items3: [] },

        { items0: null, items1: null, items2: null, items3: null },

      ];

      this.columnData = [

        { label: "模板1列", prop: "items0" },

        { label: "模板2列", prop: "items1" },

        { label: "模板3列", prop: "items2" },

        { label: "模板4列", prop: "items3" },

      ];

    },

  },

};

</script>