ElementUI的Table表格新增自定義頭CheckBox多選框

在ElmentUI的Table表格元件中，也許你會使用type為selection值的多選框功能，但是此時設定的label屬性不生效，不能設定標題名稱；有時候我們的需求就是要新增標題名稱，那該如何處理呢？當然你可以對其樣式做特殊處理，也可以自定義標題，本文將描述如何利用自定義標題來新增多選框和標題名稱，特別是在該過程的踩過的雷和填補過的坑。

　　（一）需求：在Table表格中新增一列用於批量操作當前頁的該列，例如：通過多選框來對批量設定該列的兩種屬性狀態，選中時表示全部隱藏，不選中時表示全部顯示，若部分隱藏、部分顯示時多選框呈現第三種樣式狀態，一般是短橫線表示。

　　（二）方案：利用Table表格column的header屬性。

1. 利用插槽進行設定，即slot="header"，這樣就可以在表頭中自定義樣式來；若不設定該屬性，那麼是對列內容進行設定。
2. 具體的程式碼如下：

   

   首先在工程目錄下安裝element，通過npm i element-ui -S命令安裝即可；
   然後在工程中引入element，在main.js檔案中新增這樣兩條語句：
   import ElementUI from 'element-ui';
   Vue.use(ElementUI);
   接著，我們在App.vue檔案中進行測試，新增如下程式碼：
   

   <template>

       <div id="app">

       <img src="./assets/logo.png">

       <el-table :data="tableData" style="width: 100%">

          <el-table-column

              label="姓名"

              prop="name">

          </el-table-column>

          <el-table-column

              label="性別"

              prop="sex">

          </el-table-column>

          <el-table-column align="right">

          <template slot="header" slot-scope="scope">

              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"

               @change="handleCheckAllChange">隱藏</el-checkbox>

          </template>

          <template slot-scope="scope">

              <el-checkbox v-model="scope.row.checked" @change="handleCheckOneChange">隱藏</el-checkbox>

          </template>

          </el-table-column>

       </el-table>

       <router-view/>

   </div>

   </template>

    

   <script>

   export default {

       name: 'App',

       data () {

         return {

           tableData: [{

              name: '李時珍',

              sex: '男',

              checked: false

           }, {

              name: '花木蘭',

              sex: '女',

              checked: true

           }],

           checkAll: false,

           isIndeterminate: true

        }

      },

      methods: {

          handleCheckAllChange (val) {

              console.info('check all change is ', val)

              this.isIndeterminate = false

              this.tableData.forEach(item => {

                  item.checked = val

              })

          },

          handleCheckOneChange (val) {

              console.info('check one change is ', val)

              let totalCount = this.tableData.length

              let someStatusCount = 0

              this.tableData.forEach(item => {

                  if (item.checked === val) {

                       someStatusCount++

                  }

              })

              this.checkAll = totalCount === someStatusCount ? val : !val

              this.isIndeterminate = someStatusCount > 0 && someStatusCount < totalCount

          }

      }

   }

   </script> 

   

3. 執行後的效果圖如下： 

　　在上圖中，我們可以通過表頭的隱藏多選框來批量設定列表資料，當我們選中上圖“表頭隱藏”多選框時，列表中的兩個“隱藏”多選框都會被選中；當我們取消“表頭隱藏”多選框時，列表中的兩個“隱藏”多選框會同時被取消選中；當我們同時選中列表中的兩個“隱藏”多選框時表頭的“表頭隱藏”多選框也會被選中；當我們同時取消列表中兩個“隱藏”多選框時表頭的“表頭隱藏”多選框也會被取消選中；當列表中的兩個“隱藏”多選框，一個被選中，另外一個沒有被選中時表頭的“表頭隱藏”多選框會呈現第三種狀態，樣式本應該會是一條短橫線，但是在上圖中卻沒有顯示預期的效果，這是在safari瀏覽器的效果，但是在chrome瀏覽器中會表現預期的第三種狀態效果的。

　　4.  挖坑說明:

　　

　　其實之初在新增這個功能的時候我是沒有新增slot-scope="scope"屬性，因為在開發工具中提示紅色的波浪形，表示

　　“[vue/no-unused-vars]
　　'scope' is defined but never used.eslint-plugin-vue

　　Peek Problem

　　No quick fixes available”，其實這只是eslint外掛的語法檢查，當時我就去掉了；此外，當時還沒有新增v-model="checkAll"屬性，只是新增@change事件響應，此此時操作介面時表頭多選框的狀態能夠正常切換；但是當我把v-model="checkAll"屬性新增後，操作介面時發現表頭的多選框的狀態只跟初始值checkAll有關，若checkAll初始值為false，那麼表頭的多選框就會一直是取消選中的狀態；若checkAll初始值為true，那麼表頭的多選框就會一直是選中的狀態。納悶了很久，最後我無意中新增上slot-scope="scope"這個屬性，操作介面，結果表頭的多選框能夠正常切換狀態了。這就是我給自己挖的一個坑，在這裡我對Vue中的插槽功能還不是很熟悉吧，需要補一補這方面的知識。不過，最後還是自己把這個坑給填上了。

　　5. 擴充

　　在自定義其它型別的表頭時可以參考上述流程，框架是類似的，千萬不要把插槽屬性省略了，否則的話會有奇怪的坑出現。

 

------20200112勉

閱讀是一種修養，分享是一種美德。