快捷導(dǎo)航

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

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

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

嘚吧嘚

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

具體要求如下：

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

最終如果如下：

在這里插入圖片描述

要到這種效果顯然需要對(duì)el-table進(jìn)行一定個(gè)性化填充。

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

實(shí)現(xiàn)

1、先添加必須列(字段)，這個(gè)就是正常的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="序號(hào)" 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、添加非必須列(字段)，并在表頭添加復(fù)選框，這塊可以用插槽的方式來做。
@change：復(fù)選框勾選狀態(tài)發(fā)生改變時(shí)出發(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ù)自己的需求填充相應(yīng)的邏輯就行了。每個(gè)人的需求不一樣，邏輯也肯定不一樣，而且js這不是本篇文章的重點(diǎn)，所以在此就不多說了。

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

在這里插入圖片描述

此時(shí)需要屏蔽表頭列的冒泡事件，可以使用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>

效果如下：

在這里插入圖片描述