element表格（el-table）自定义复选框（添加提示el-tooltip）

最新推荐文章于 2024-08-09 15:30:12 发布

fufu_good

最新推荐文章于 2024-08-09 15:30:12 发布

阅读量9.2k

点赞数 1

分类专栏：前端文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/fufu_good/article/details/120750328

版权

本文介绍了在Element UI的el-table组件中如何自定义复选框并添加提示，以满足表格中禁选行提示的需求。在实现过程中，遇到了表单验证与复选框事件顺序的问题，通过监听selection变量解决了这一问题。最后还分享了一个关于隐藏复选框文字的小优化技巧。

摘要由CSDN通过智能技术生成

1.需求

表格想要存在禁用的行，用户想要有提示：为什么不可以勾选！！！（如下图）
在这里插入图片描述

2.实现

使用表格自带的复选框无法实现该功能，因此需要自定义复选框

html代码：

<el-table border :data="dataList">
	<el-table-column align="center">
		<!--下面是表头的复选框，使用插槽header。实现全选以及部分选择-->
        <template slot="header" slot-scope="{row}">
        	<!--v-model绑定全选（isCheck）变量，indeterminate：绑定是否部分选择-->
            <el-checkbox v-model="isCheck" :indeterminate="indeterminate"
                         @change="handleCheckAllChange"<