«

vue中怎么给el-radio添加tooltip并实现点击跳转

时间:2024-7-13 14:22     作者:韩俊     分类: Javascript


本篇内容介绍了“vue中怎么给el-radio添加tooltip并实现点击跳转”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

    给el-radio添加tooltip并实现点击跳转

    <el-tooltip :disabled="toolTipDisable" placement="bottom" effect="light">
        <div slot="content" @click="goToRout()">{{toolTipContent}}</div>
        <el-radio label="3">New Youk</el-radio>
    </el-tooltip>
    
    goToRout(){
       let routeData = this.$router.resolve({name: '/your url', params: {active:'1'}});
       window.open(routeData.href, '_blank');
    }

    说明:

    (1)toolTipDisable:可控制tooltip是否可用

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

    (3)goToRout():路由跳转方法

    (4)toolTipContent:提示的内容信息

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

    需求

    表格想要存在禁用的行,用户想要有提示:为什么不可以勾选!!!(如下图)

    实现

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

    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"></el-checkbox>
            </template>
            <template slot-scope="{row}">
                <!--这里在复选框可用的时候禁用,不可用的时候使用el-tooltip进行提示-->
                <el-tooltip :disabled="提示框禁用的条件" :content="提示语" placement="left">
                    <!--selection是表格中选中行的数据,类型为数组-->
                    <!--这里建议不要使用@change实现父子数据间的通信-->
                    <el-checkbox-group v-model="selection">
                        <!--此处的label是复选框右边显示的值,也是选中后的值。如果要一行的数据,直接使用row即可-->
                        <el-checkbox :disabled="复选框禁用条件" :key="row.id" :label="row.id"></el-checkbox>
                    </el-checkbox-group>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>

    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(&lsquo;input&rsquo;,选中的行)进行传值,但是这里存在一个问题,就是:我本用<el-checkbox-group @change=“handleChange”>,在handleChange将改变的值传给父组件中的表格,在表格中我将该项设为必填,因此需要表单验证,但是这个的@change事件在表单验证之后才执行(我测试后得出的结果),因此选中一行的时候总会提示必填,即表单验证不通过。

    解决办法:

    使用watch监听selection变量

    效果

    小优化

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

    .el-checkbox__label {
        visibility: hidden;
    }

    标签: javascript vue

    热门推荐