动态添加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 = []; // 放置所有新添列名的数组
      this.tableCol = this.defeltList; // 每次进行这步操作时，都先将tableCol还原成初始值
      for (let i = 0; i < values.length; i++) {  
      // 遍历，将values和labels的值都放置一个对象中，然后push进defList数组里
        let aa = { label: "", prop: "" };
        aa.label = labels[i];
        aa.prop = values[i];
        this.defList.push(aa);
      }
      this.tableCol = this.tableCol.concat(this.defList);
      // 将defList数组和tableCol合并赋值给tableCol
      //下面一步是因为当动态添加列之后，el-table会发生错乱，需要将表格的重新布局
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();//这个是只要table数据发生变化的时候就重新渲染表格
      });
    },
    closeForm(tableFlag) {
      if (tableFlag) {
        // 重新刷新表格内容
        console.log(111);
      }
      this.tableDialog = false;
    },
	}
};
script>

子组件tableColChange

<template>
  <el-dialog
    v-if="tableDialog"
    title="设置显示字段"
    :visible.sync="tableDialog"
    width="50%"
    @close="closeForm(0)"
    class="colChangeClass">
    <el-divider class="divider">el-divider>
    
    <div class="content">
      <div class="checkbox">
        <p>可选字段：p>
        <el-checkbox-group v-model="checkList" @change="selectBox">
          <el-checkbox label="project_sn:提案编号" disabled>提案编号el-checkbox >
          <el-checkbox label="project_name:提案名称" disabled >提案名称el-checkbox  >
          <el-checkbox label="project_type:知识产权类型" disabled>知识产权类型el-checkbox>
          <el-checkbox label="project_date:提案日期" disabled>提案日期el-checkbox>
          <el-checkbox label="project_person:提案人" disabled>提案人el-checkbox >
          <el-checkbox label="project_department:所属部门" disabled>所属部门el-checkbox>
          <el-checkbox label="project_link:案件环节" disabled>案件环节el-checkbox>
          <el-checkbox label="project_status:案件状态" disabled>案件状态el-checkbox>
          <el-checkbox label="project_city:申请国家">申请国家el-checkbox>
          <el-checkbox label="project_subject:所属课题">所属课题el-checkbox>
          <el-checkbox label="project_field:技术领域">技术领域el-checkbox>
        el-checkbox-group>
      div>

      <div class="colList">
        <p>已勾选p>
        <ol>
         	
          <li v-for="item in wordList" :key="item.index"> {{ item }} li> 
          
          <li
            v-for="item in addList"
            :key="item.index"
            class="addList"
            :class="{ displayNone: isNone }">
            <span>{{ item }}span>
            
            <i class="el-icon-close" @click="resetLi($event)" />
          li>
        ol>
      div>
    div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="confirm"> 确定el-button>
      <el-button @click="closeForm(0)"> 取消el-button>
      <el-button @click="reset"> 重置el-button>
    span>
  el-dialog>
template>

<script>
export default {
  name: "tableColChange",
  data() {
    return {
      tableDialog: false,
      wordList: [],
      checkList: ["project_sn:提案编号","project_name:提案名称","project_type:知识产权类型",
        		  "project_date:提案日期","project_person:提案人","project_department:所属部门",
        		  "project_link:案件环节", "project_status:案件状态"],
      addCheckList: [],
      defaultList: [],
      addList: [],
      values: [],
      labels: [],
      isNone: false,
      
    };
  },
  created() {
    this.wordListChange();
  },
  methods: {
    wordListChange() { // 这个是从 默认已选择的单选框提取出文字，渲染列表
      this.defaultList = this.checkList;
      this.checkList.forEach((item) => {
        const label = item.split(":")[1];
        this.wordList.push(label);
      });
    },
    selectBox(val) {
    // 当单选框改变时，获取当前checkList的值
      this.values = [];
      this.labels = [];
      this.addCheckList = val;
      // 分别获取value值和label值，是为了之后将这些传给父组件
      val.forEach((item) => {
        const value = item.split(":")[0];
        const label = item.split(":")[1];
        this.values.push(value);
        this.labels.push(label);
      });
      // 获取新加的值，并传给列表进行渲染
      this.addList.length = 0;
      val.slice(8, val.length).forEach((item) => {
        const label = item.split(":")[1];
        this.addList.push(label);
      });
    },
    confirm() { //点击按钮，关闭对话框，将值传给父组件
      this.closeForm(1);
      this.$emit("changeCol", this.values.slice(8), this.labels.slice(8));
    },
    closeForm(tableFlag) { // 关闭组件，传给父组件一个标志
      this.tableDialog = false;
      this.$emit("closeForm", tableFlag);
    },
    reset() { // 重置，将单选框和列表都恢复给原始值
      this.checkList = this.defaultList;
      this.addList.length = 0;
    },
    resetLi(e) {  // 按钮Icon突变进行删除操作
      let clickWord = e.currentTarget.previousElementSibling.innerHTML;
      let clickId = this.addList.indexOf(clickWord);
      this.addList.splice(clickId, 1);
      this.checkList.forEach((item, index) => {
        if (item.split(":")[1] == clickWord) {
          this.checkList.splice(index, 1);
        }
      });
    },
  },
};
script>
<style scope lang="scss">
@import "../scss/colChange.scss";
style>

colChange.scss

.colChangeClass{
	.el-dialog__body {padding: 0 20px 20px; }
    .content {
    	height: 300px;
        border: 1px solid #ccc;
        padding: 0 15px 0;
        .divider { margin-bottom: 16px; }
        .checkbox {
        	padding-top: 10px;
            float: left;
            width: 520px;
            .el-checkbox {
            	width: 90px;
            	margin-left: 10px;
            	margin-bottom: 20px;
            }
        }
        .colList {
            width: 330px;
            height: 100%;
            float: right;
            border-left: 1px solid #ccc;
            p {margin: 15px 21px;}
            ol {
            	height: 248px;
            	overflow: auto;
            }
            li {
            	margin-bottom: 15px;
            	width: 252px;
            	color: rgb(153, 153, 153);
            }
            .addList {color: #000;
            	i {
              		float: right;
              		cursor: pointer;
            	}
            }
        }
    }
    .displayNone {display: none;}
}

终版

App.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  div>
template>
<script>
export default {
  name: "App",
  provide() {//父组件中通过provide来提供变量，在子组件中通过inject来注入变量。
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterAlive: true, //控制视图是否显示的变量
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false; //先关闭，
      this.$nextTick(function () {
        this.isRouterAlive = true; //再打开
      });
    },
  },
};
script>

父组件 colChange.vue

<template>
  <div class="vertical">
    <div class="tools">
      <el-button icon="el-icon-s-tools" @click="settingBtn" type="primary" class="settingIcon">el-button>
    div>
    <el-table :data="tableData" ref="multipleTable" class="vertical_content" 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 :key="index" align="center" :label="item.label" :prop="item.prop" 
      				    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" @click="handleEdit(scope.row)">编辑el-button>
          <el-button type="text" @click="handleDel(scope.row)">删除el-button>
        template>
      el-table-column>
    el-table>
    <table-col-change v-if="tableDialog" ref="tableDialogForm" @closeForm="closeForm">table-col-change>
  div>
template>
<script>
import tableColChange from "./components/tableColChange";
export default {
  name: "create",
  components: { tableColChange },
  inject: ['reload'],
  data() {
    return {
      tableData: [
        { id: 0, sn: "021455", name: "王小虎", type: "你好", date: "2016-05-02",person: "柳柳", city: "中国" },
        { id: 1, sn: "065455" },
      ],
      defaultCol: [
      { label: "编号", prop: "sn" },
      { label: "名称", prop: "name" },
      { label: "类型", prop: "type" },
      { label: "日期", prop: "date" }
      ],
      multipleTable: [],
      tableDialog: false,
      changList: [], // 存放localStorage的值
      tableCol: [], // 数据渲染的列 数组
    };
  },
  created() {
    this.getDefaultCol();
  },
  methods: {
    //若localStorage里有想要的值，渲染localStorage的值，如果没有 则渲染defaultCol
    getDefaultCol() {
      this.tableCol = this.defaultCol;
      if (localStorage.getItem('changList') !== null) {
        this.changList = localStorage.getItem('changList').split(',');
        this.tableCol = [];
        this.changList.forEach((item) => {
          let col = { label: "", prop: "" };
          col.prop = item.split(':')[0];
          col.label = item.split(':')[1];
          this.tableCol.push(col);
        })
      }
    },
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      this.multipleTable = val;
    },
    settingBtn() {
      this.tableDialog = true;
      this.$nextTick(() => {
        //nextTick：当更改数据后，想立即使用js操作新的视图的时候，将操作的DOM操作放在里面
        this.$refs["tableDialogForm"].tableDialog = true;
      });
    },
    closeForm(tableFlag) { // 关闭对话框做的事
    // 不知道为啥changList的值更换不得位，出现了点击两次设置的确定按钮，tableCol才更新成功
    // 因为没有接口，想到的解决方法也只有刷新，如果有接口，可以试试 this.$store.dispatch("**/**");
      this.reload(); 
      if (this.changList === null) {
        this.tableCol = this.defaultCol;
      } else {
      // changList是String，先转成数组。将tableCol清空，遍历changList，渲染tableCol
        this.changList = localStorage.getItem('changList').split(',');
        this.tableCol = [];
        this.changList.forEach((item) => {
          let col = { label: "", prop: "" };
          col.prop = item.split(':')[0];
          col.label = item.split(':')[1];
          this.tableCol.push(col);
        })
      }
    },
    handleEdit(row) { console.log(row.id);},
    handleDel(row) {  console.log(row.id);}
  },
};
script>
<style lang="scss" scoped>
.vertical {
  .tools {
    height: 36px;
    margin: 20px 2% 0;
    .settingIcon {
      float: right;
    }
  }
  .vertical_content {
    border-top: 1px solid rgb(230, 235, 245);
    width: 97%;
    margin: 20px;
  }
}
style>

子组件 tableColChange.vue

<template>
  <el-dialog v-if="tableDialog" title="设置显示字段" :visible.sync="tableDialog" width="50%" @close="closeForm(0)" class="colChangeClass">
    <div class="content">
      <el-row :gutter="25">
        <el-col :span="16" :xs="24">
          <div class="checkbox">
            <p>可选字段：p>
            <el-checkbox-group v-model="checkList" @change="selectBox">
              <el-checkbox label="sn:编号" disabled>编号el-checkbox>
              <el-checkbox label="name:名称" disabled>名称el-checkbox>
              <el-checkbox label="type:类型" disabled>类型el-checkbox>
              <el-checkbox label="person:上传人">上传人el-checkbox>
              <el-checkbox label="city:国籍">国籍el-checkbox>
              <el-checkbox label="date:日期" disabled>日期el-checkbox>
            el-checkbox-group>
          div>
        el-col>
        <el-col :span="8" :xs="24">
          <div class="colList">
            <p>已勾选p>
            <ol>
              <li v-for="item in wordList" :key="item.index" style="cursor: move">
                {{ item }}
              li>
              <li v-for="item in addList" :key="item.index" class="addList" style="cursor: move">
                <span>{{ item }}span>
                <i class="el-icon-close" @click="resetLi($event)" />
              li>
            ol>
          div>
        el-col>
      el-row>
    div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="confirm">确定el-button>
      <el-button @click="cancel">取消el-button>
      <el-button @click="reset">重置el-button>
    span>
  el-dialog>
template>
<script>
export default {
  name: "tableColChange",
  data() {
    return {
      tableDialog: false,
      checkList: ["sn:编号", "name:名称", "type:类型", "date:日期"],
      changeList: [],
      wordList: [], //列表文字 数组
      defaultList: [], // 默认最初选择的数组
      labels: [], // 放置label的数组
      addList: [], // 放置变动的数据
    };
  },
  created() {
    this.wordListChange();
  },
  methods: {
    wordListChange() {
      this.defaultList = this.checkList;
      this.listForEach(this.checkList, this.wordList);
      if (localStorage.getItem('changList') != null) {
        this.changeList= localStorage.getItem('changList').split(',');
        this.listForEach(this.changeList.slice(this.checkList.length), this.addList);
        this.checkList = this.changeList;
      }
    },
    selectBox(val) {
      this.labels = [];
      this.listForEach(val, this.labels);
      // 获取新加的值，并传给列表进行渲染
      this.addList.length = 0;
      let between = val.slice(this.defaultList.length, val.length);
      this.listForEach(between, this.addList);
      this.pdLength(val.length);
    },
    // 按钮Icon进行删除操作
    resetLi(e) {
      let clickWord = e.currentTarget.previousElementSibling.innerHTML;
      let clickId = this.addList.indexOf(clickWord);
      this.addList.splice(clickId, 1);
      this.checkList.forEach((item, index) => {
        if (item.split(":")[1] == clickWord) {
          this.checkList.splice(index, 1);
        }
      });
    },
    reset() {
      this.checkList = this.defaultList;
      this.addList.length = 0;
      localStorage.removeItem('changList')
    },
    cancel() {
      this.closeForm(0);
      localStorage.setItem('changList', this.checkList)
    },
    confirm() {
      this.closeForm(1);
      localStorage.setItem('changList', this.checkList)
    },
    closeForm(tableFlag) {
      this.tableDialog = false;
      this.$emit("closeForm", tableFlag);
    },
    listForEach(list, labelList = []) {
      list.forEach((item) => {
        labelList.push(item.split(':')[1]);
      })
    },
    pdLength(lengths) {
      if (lengths <= this.defaultList.length) {
        this.checkList = this.defaultList;
        this.addList.length = 0;
      }
    },
  },
};
script>
<style scope lang="scss">
@import "@/views/group/colChange.scss";
style>

样式 colChange.scss

.colChangeClass{
	.el-dialog__body {padding: 10px 20px; }
    .content {
    	height: 300px;
        border: 1px solid #e6e6e6;
        padding: 0 15px;
        .checkbox {
        	padding-top: 10px;
            float: left;
            .el-checkbox {
            	width: 90px;
            	margin-left: 10px;
            	margin-bottom: 20px;
            }
        }
        .colList {
            height: 100%;
            float: right;
            border-left: 1px solid #e6e6e6;
            p {margin: 15px 21px;}
            ol {
            	height: 239px;
            	overflow: auto;
            }
            li {
            	margin-bottom: 15px;
            	width: 200px;
            	color: rgb(153, 153, 153);
            }
            .addList {
                color: #000;
            	i {
              		float: right;
              		cursor: pointer;
            	}
            }
        }
    }
}

其他版

<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" align="center"
      			v-for="(item, index) in tabelHeader" :key="index">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="handleDel(scope.row)">删除el-button>
        template>
      el-table-column>
    el-table>

    <el-dialog title="设置显示字段" :visible.sync="showSort" width="700px" center>
      <div class="sortBox">
        <el-row :gutter="25">
          <el-col :span="12" :xs="24">
            <div class="leftBox">
              <p>可选字段：p>
              <el-checkbox-group v-model="checkedData" @change="handleCheckedDataChange">
                el-checkbox>
              el-checkbox-group>
            div>
          el-col>
          <el-col :span="12" :xs="24">
            <div class="rightBox">
              <p>已勾选p>
              <draggable v-model="selectedSort" :options="dragOptions">
                <transition-group tag="div" class="item-ul">
                  <div v-for="(item, index) in selectedSort" class="drag-list" :key="index">
                    {{index +1}}. {{ item }}
                  div>
                transition-group>
              draggable>
            div>
          el-col>
        el-row>
      div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">确 定el-button>
        <el-button size="small" @click="cancelSubmit">取 消el-button>
      span>
    el-dialog>
  div>
template>
<script>
import draggable from "vuedraggable";
export default {
  name: "index",
  components: {	draggable },
  data() {
    return {
      showSort: false,
      checkAll: false,
      isIndeterminate: true,
      checkedData: [], //选择了的数据
      selectedSort: [], //选择后排序的数据
      tabelHeader: [],
      allSelectList: [],
      multipleTable: [],
      tableData: [
        { date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄", zip: 200333 },
        { date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄", zip: 200333 },
      ],
      dragOptions: {animation:120, scroll:true, group:"sortlist", ghostClass:"ghost-style"},
      headerData: [
        { title: "日期", value: "date", tick: true},
        { title: "姓名", value: "name", tick: true},
        { title: "省份", value: "province", tick: false},
        { title: "市区", value: "city", tick: false},
        { title: "地址", value: "address", tick: true},
        { title: "邮编", value: "zip", tick: false},
      ],
    };
  },
  created() {
    this.headerData.forEach((el) => {
      if (el.tick == true) {
        this.checkedData.push(el.title);
        this.allSelectList.push(el.title);
        this.tabelHeader.push(el)
      }
    });
    this.selectedSort = this.checkedData;
    this.handleCheckedDataChange(this.checkedData);
  },
  methods: {
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      this.multipleTable = val;
    },
    goSort() {
      this.showSort = true;
    },
    handleCheckedDataChange(val) {
      let checkedCount = val.length;
      this.selectedSort = val
      this.checkAll = checkedCount === this.headerData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.headerData.length;
    },
    submit() {
      this.tabelHeader = [];
      this.selectedSort.forEach((item) => {
        this.headerData.forEach((el) => {
          if (item == el.title) {
            this.tabelHeader.push(el);
          }
        });
      });
      this.showSort = false;
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();//这个是只要table数据发生变化的时候就重新渲染表格
      });
    },
    cancelSubmit() {
      this.selectedSort = this.checkedData
      this.showSort = false
    },
  },
};
script>
<style lang="scss" scoped>
.content {
  .tools {
    height: 36px;
    margin: 20px 2% 0;
    .settingIcon {
      float: right;
    }
  }
  .el-table {
    width: 97%;
    margin: 20px;
  }
  .sortBox {
    .leftBox {
      border: 1px solid #ebeef5;
      height: 394px;
      padding: 15px;
      border-radius: 5px;
      label {
        margin-bottom: 15px;
      }
    }
    .rightBox {
      height: 394px;
      border: 1px solid #ebeef5;
      padding: 15px;
      border-radius: 5px;
      overflow-y: auto;
      .drag-list {
        border: 1px #e1e4e8 solid;
        padding: 10px;
        margin: 0 15px 15px;
        border-radius: 6px;
        cursor: pointer;
        transition: border 0.3s ease-in;
        i {
          float: right;
        }
      }
      .drag-list:hover {
        border: 1px solid #20a0ff;
      }
    }
  }
}
style>