脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-table表头添加勾选框

el-table表头添加勾选框的实现示例

 更新时间：2023年01月19日 08:31:09   作者：布丁吖  
本文主要介绍了el-table表头添加勾选框的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

嘚吧嘚

table的行勾选是比较常规的操作，但是有的时候就有各种奇葩的需求蹦出来。😭
比如最近有一个需求，不仅需要勾选行，还需要勾选列，其实我心中有了一万头可爱的小羊驼，但是实际上还是很从心的屈服了。😂

具体要求如下：

1、行可勾选。
2、非必须列(字段)表头添加复选框，可勾选；必须列(字段)表头无复选框，不可勾选。
3、每行的数据由两部分组成，必须字段加勾选字段。
4、非必须列(字段)默认不勾选。

最终如果如下：

在这里插入图片描述

要到这种效果显然需要对el-table进行一定个性化填充。

不过这样用表格的比较少，相关的资料、文章也很少，所以做这块的时候也花了一番功夫，所以还是很有记录和分享意义的😆。

实现

1、先添加必须列(字段)，这个就是正常的table列。
@selection-change：选中数据改变触发事件，@row-click：行单击触发事件。

    <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：复选框勾选状态发生改变时出发的事件

      <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、将第一步、第二步中的触发事件，根据自己的需求填充相应的逻辑就行了。每个人的需求不一样，逻辑也肯定不一样，而且js这不是本篇文章的重点，所以在此就不多说了。

4、发现一个小问题，就是勾选列的复选框时会触发列排序😰，所以需要在解决一下这个小问题。

在这里插入图片描述

此时需要屏蔽表头列的冒泡事件，可以使用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>

效果如下：

在这里插入图片描述

到此这篇关于el-table表头添加勾选框的实现示例的文章就介绍到这了,更多相关el-table表头添加勾选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue的状态管理模式vuex

    vue的状态管理模式vuex

    本篇文章主要介绍了深入理解vue的状态管理模式vuex，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue3中按需引入ECharts详细步骤(一看就会)

    Vue3中按需引入ECharts详细步骤(一看就会)

    新项目采用Vue3作为前端项目框架,避免不了要使用echarts,这篇文章主要给大家介绍了关于Vue3中按需引入ECharts的相关资料,需要的朋友可以参考下
    2023-09-09
  • vue 处理跨域问题及解决方法小结

    vue 处理跨域问题及解决方法小结

    跨域问题的出现是因为浏览器的同源策略问题，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击，今天小编通过本文给大家介绍下vue 处理跨域问题，感兴趣的朋友一起看看吧
    2021-09-09
  • vue实现购物车结算功能

    vue实现购物车结算功能

    这篇文章主要为大家详细介绍了vue实现购物车结算功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 解析vue3的ref,reactive的使用和原理

    解析vue3的ref,reactive的使用和原理

    这篇文章主要介绍了vue3的ref,reactive的使用和原理解析,分析了 reactive 的实现，以及 reactive api 返回的 proxy 代理对象使用的 handlers 陷阱，并且对陷阱中我们最常用的 get 和 set 的源码进行分析，需要的朋友可以参考下
    2022-09-09
  • vue项目中js文件使用vue的this实例说明

    vue项目中js文件使用vue的this实例说明

    这篇文章主要介绍了vue项目中js文件使用vue的this实例说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue中defineProperty和Proxy的区别详解

    vue中defineProperty和Proxy的区别详解

    这篇文章主要介绍了vue中defineProperty和Proxy的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue如何更改表格中的某一行选项值

    Vue如何更改表格中的某一行选项值

    这篇文章主要介绍了Vue如何更改表格中的某一行选项值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue项目中销毁window.addEventListener事件监听解析

    vue项目中销毁window.addEventListener事件监听解析

    这篇文章主要介绍了vue项目中销毁window.addEventListener事件监听，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • Vue.js轮播图走马灯代码实例（全）

    Vue.js轮播图走马灯代码实例（全）

    这篇文章主要介绍了Vue.js轮播图走马灯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论