el-table表頭添加勾選框的實現(xiàn)示例

更新時間：2023年01月19日 08:31:09 作者：布丁吖

本文主要介紹了el-table表頭添加勾選框的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

嘚吧嘚

table的行勾選是比較常規(guī)的操作，但是有的時候就有各種奇葩的需求蹦出來。??
比如最近有一個需求，不僅需要勾選行，還需要勾選列，其實我心中有了一萬頭可愛的小羊駝，但是實際上還是很從心的屈服了。??

具體要求如下：

1、行可勾選。
2、非必須列(字段)表頭添加復選框，可勾選；必須列(字段)表頭無復選框，不可勾選。
3、每行的數(shù)據(jù)由兩部分組成，必須字段加勾選字段。
4、非必須列(字段)默認不勾選。

最終如果如下：

在這里插入圖片描述

要到這種效果顯然需要對el-table進行一定個性化填充。

不過這樣用表格的比較少，相關的資料、文章也很少，所以做這塊的時候也花了一番功夫，所以還是很有記錄和分享意義的??。

實現(xiàn)

1、先添加必須列(字段)，這個就是正常的table列。
@selection-change：選中數(shù)據(jù)改變觸發(fā)事件，@row-click：行單擊觸發(fā)事件。

    <el-table ref="mainTable" :data="tableData" @selection-change="doSelectChange" @row-click="doRowClick" row-key="id" border fit>
      <el-table-column type="selection" width="80px" :indeterminate="true" fixed="left"></el-table-column>
      <el-table-column type="index" label="序號" width="55px" align="center"></el-table-column>
      <el-table-column prop="ID" label="ID" min-width="160px" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="150px" align="center"></el-table-column>
    </el-table>

2、添加非必須列(字段)，并在表頭添加復選框，這塊可以用插槽的方式來做。
@change：復選框勾選狀態(tài)發(fā)生改變時出發(fā)的事件

      <el-table-column prop="dept" min-width="150px" align="center" sortable>
        <template v-slot:header="scope">
            <el-checkbox @change="change($event, scope, 'dept')">所屬</el-checkbox>
        </template>
      </el-table-column>

3、將第一步、第二步中的觸發(fā)事件，根據(jù)自己的需求填充相應的邏輯就行了。每個人的需求不一樣，邏輯也肯定不一樣，而且js這不是本篇文章的重點，所以在此就不多說了。

4、發(fā)現(xiàn)一個小問題，就是勾選列的復選框時會觸發(fā)列排序??，所以需要在解決一下這個小問題。

在這里插入圖片描述

此時需要屏蔽表頭列的冒泡事件，可以使用click.stop來解決此問題，代碼如下。

      <el-table-column prop="dept" min-width="150px" align="center" sortable>
        <template v-slot:header="scope">
            <span @click.stop>
              <el-checkbox @change="change($event, scope, 'dept')">所屬</el-checkbox>
            </span>
        </template>
      </el-table-column>

效果如下：

在這里插入圖片描述