动态添加el-table列 和 多选表格默认选中

默认选中

<template>
  <div class="content">
    <div class="tools">
      <el-button icon="el-icon-s-tools" @click="goSort" type="primary" class="settingIcon"></el-button>
    </div>
    <el-table :data="tableData" ref="multipleTable" stripe :row-key="getRowKey" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :reserve-selection="true"></el-table-column>
      <el-table-column align="center" label="序号" width="60" fixed>
        <template slot-scope="scope">{
  { scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column :prop="item.value" :label="item.title" v-for="(item, index) in tabelHeader" :key="index" align="center"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
    
  name: "index",
  data() {
    
    return {
    
      multipleTable: [],
      tableData: [
        {
     date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄", zip: 200333,
        },
        {
     date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄", zip: 200333, checked: true
        },
      ],
    };
  },
  created() {
    
    this.$nextTick(() => {
    
      for (let i = 0; i < this.tableData.length; i++) {
    
        if (this.tableData[i].checked == true) {
    
          this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
        }
      }
    });
  },
  methods: {
    
    getRowKey(row) {
    
      return row.id;
    },
    handleSelectionChange(val) {
    
      this.multipleTable = val;
    },
    handleEdit(row) {
    
      console.log(row.name);
    },
  },
};
</script>

• 初版与终版的区别：初版是静态的，没有保存数据；终版用了localStorage保存数据，会一直在停留在浏览器。浏览器存储数据的方式有：localStorage sessionStorage cookie 具体用哪个根据实际情况来确定
• 其他版与前两版的区别：其他版可以进行拖拽，表格可以变换位置，但是没有 ‘点击icon删除’ 这个功能，没有进行localStorage 存储，没有默认禁用

初版

父组件vertical

<template>
  <div class="vertical">
    <div class="tools">
      <el-button icon="el-icon-s-tools" @click="colChange" class="settingIcon"></el-button>
    </div>
    <el-table :data="tableData" ref="multipleTable" class="vertical-content"
      		  :row-key="getRowKey" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :reserve-selection="true"></el-table-column>
      <el-table-column align="center" label="序号" width="60" fixed>
        <template slot-scope="scope">{
  { scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column :key="index" align="center" :label="item.label" :prop="item.prop"
        			   width="200" v-for="(item, index) in tableCol">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <table-col-change v-if="tableDialog" ref="tableDialogForm" @closeForm="closeForm" 
    				  @changeCol="changeCol"></table-col-change>
  </div>
</template>
<script>
import tableColChange from "./components/tableColChange";
export default {
    
  name: "vertical",
  components: {
     tableColChange },
  data() {
    
    return {
    
      tableData: [
        {
    id: 0,project_sn: "PP202102021455",project_name: "王小虎",project_type: "专利",
         project_date: "2016-05-02",project_person: "柳柳",project_department: "华南农业大学",
         project_link: "领导",project_status: "待申请",project_city: "中国",
         project_subject: "无人机",project_field: "人工智能"},
        {
     id: 1, project_sn: "PP202102021456" },
      ],
      tableCol: [
        {
    label: "提案编号", prop: "project_sn"},
        {
    label: "提案名称",prop: "project_name"},
        {
    label: "类型",prop: "project_type"},
        {
    label: "日期",prop: "project_date"},
        {
    label: "提案人",prop: "project_person"},
        {
    label: "所属部门",prop: "project_department"},
        {
    label: "案件环节",prop: "project_link"},
        {
    label: "状态",prop: "project_status"},
      ],
      multipleTable: [],
      defeltList: {
    },
      tableDialog: false,
      defList: [],
    };
  },
  created() {
    
    this.getDafeltCol();
  },
  methods: {
    
    getDafeltCol() {
    
      this.defeltList = [].concat(this.tableCol);},//这是为了将原始的tableCol保存下来
    getRowKey(row) {
    
      return row.id;},
    handleSelectionChange(val) {
    
      this.multipleTable = val;},
    colChange() {
    //这是点击Icon按钮触发的事件，点击之后，控制对话框出来
      this.tableDialog = true;
      this.$nextTick(() => {
     
      //nextTick：当更改数据后，想立即使用js操作新的视图的时候，将操作的DOM操作放在里面
        this.$refs["tableDialogForm"].tableDialog = true;
      });
    },
    changeCol(values, labels) {
     // 接收子组件传过来的新添的列名，并进行操作，动态更改tableCol
      this.defList = []