说明：

（1）toolTipDisable：可控制tooltip是否可用

（2）slot=“content”：表示tooltip提示的内容指定已DOM格式插入到页面

（3）goToRout()：路由跳转方法

（4）toolTipContent：提示的内容信息

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

需求

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

实现

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

html代码：

js代码：

export default {
    data() {
        return {
            dataList: [],
            isCheck: false,
            indeterminate: false,
            enabledDataList: [],//这个指没有被禁用的行，进来组件的时候需要自己处理下
            checkedCount: 0,
            selection: []
        }
    },
    methods: {
        handleCheckAllChange(value) {
            this.selection = value ? this.enabledDataList : [];
            this.indeterminate = false;
            this.$emit('input', this.selection)
        },
        
    },
    watch: {
        selection: {
            handler(v) {
                console.log(v)
                //这里采用监听selection的变化而不是使用el-checkbox-group的change事件是因为：
                // 在change事件中往父组件发消息时，表单已经完成了异步的验证，所以无法在表单验证前将选中的值发给父组件
                if (this.enabledDataList.length) {//这个条件是判断需要有。。。。
                    let checkedCount = v.length;
                    this.isCheck = checkedCount === this.enabledDataList.length;
                    this.indeterminate = checkedCount > 0 && checkedCount < this.enabledDataList.length;
                }
                this.$emit('input', v)
            },
            immediate: true
        }
    }
}

上面是实现代码的demo，亲测可以实现功能。

这里存在一个大坑（表单验证）

这表格我需要复用，因此我写成一个组件的形式，因此需要使用$emit(‘input’,选中的行)进行传值，但是这里存在一个问题，就是：我本用，在handleChange将改变的值传给父组件中的表格，在表格中我将该项设为必填，因此需要表单验证，但是这个的@change事件在表单验证之后才执行（我测试后得出的结果），因此选中一行的时候总会提示必填，即表单验证不通过。

解决办法：

使用watch监听selection变量

效果

小优化

若不想要显示复选框右边的文字（由el-checkbox 的label设置，必填要有值），可以使用visibility: hidden;

.el-checkbox__label {
    visibility: hidden;
}