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勉