vue實現checkbox點擊選擇控制element-ui table表單動態列展示與隱藏

要實現的效果：

 實現的代碼：

首先是數據準備：

複選框數據：

const tradeSelections = [
  {eng:'tradetype', name:"交易類型"},
  {eng:'ordertype', name:"下單類型"},
  {eng:'dealnum', name:"成交數量"},
  {eng:'dealprice', name:"成交價"},
  {eng:'dealline', name:"成交額"},
  {eng:'entrustnum', name:"委託數量"},
  {eng:'entrustprice', name:"委託價格"},
  {eng:'cpl', name:"平倉盈虧"},
  {eng:'charge', name:"手續費"},
];

這裏面之所以寫成對象，是因爲eng是爲了拿到值，因爲tableData裏面要根據eng的的值去拿到真正的value值，eng就是key，

name就是爲了渲染複選框和table表格的表頭值，他們都是使用中文。

表格數據： 

data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺紋鋼",
          tradetype: "開多",
          ordertype: "市價單",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺紋鋼",
          tradetype: "開多",
          ordertype: "市價單",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺紋鋼",
          tradetype: "開多",
          ordertype: "市價單",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
        {
          date: "2016-05-02",
          time: "9:00",
          city: "螺紋鋼",
          tradetype: "開多",
          ordertype: "市價單",
          dealnum: 100,
          dealprice: 90000,
          dealline: 10000,
          entrustnum: 888,
          entrustprice: 999,
          cpl: "0.33%",
          charge: 10,
        },
      ],
      key: 1, // table key
      checkList: [],//被選中的選項eng數組
      formThead: [],//渲染的表頭
      tradeSelections,
    };
  },

渲染數據：

//複選框
<div class="checkbox_group">
      <el-checkbox-group v-model="checkList" @change="changeOptions">
        <el-checkbox
          v-for="(item, index) in tradeSelections"
          :label="item.eng"
          :key="index"
        >{{item.name}}</el-checkbox>
      </el-checkbox-group>
</div>
//table表格
<el-table
      :key="key"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column property="date" label="委託日期"> </el-table-column>
      <el-table-column property="time" label="時間"> </el-table-column>
      <el-table-column property="city" label="標的"> </el-table-column>
      <el-table-column v-for="(item,index) in formThead" :key="index" :label="item.name">
        <template slot-scope="scope">
          {{ scope.row[item.eng] }}
        </template>
      </el-table-column>
 </el-table>

對複選框進行監控：

watch: {
    checkList(val) {
      this.formThead = this.tradeSelections.filter(i => val.indexOf(i.eng) >= 0)//挑選被選中的對象
      this.key = this.key + 1//爲了保證table 每次都會重渲，這樣做體驗感更好，如果不爲table設置key值的話，用戶一旦選中了複選框選項，就是在原來table基礎上添加刪除每一列，頁面就有跳動的感覺，體驗感不好
    }
  },

checkList裏面是：

只包含eng的值，所以要對tradeSelections進行過濾，找到被選中的對象，push到即將被循環的數組裏面。

還沒明白的，自己可以動手試一試。

這樣就實現了此功能。如有更好的辦法，歡迎探討！

參考文章：https://blog.csdn.net/qq_36410795/article/details/89920379