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

本篇内容介绍了“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;}

“vue中怎么给el-radio添加tooltip并实现点击跳转”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！