欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式

 更新時(shí)間：2023年04月13日 10:29:00   作者：透過代碼觀世界  
這篇文章主要介紹了vue中給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

給el-radio添加tooltip并實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)

<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提示的內(nèi)容指定已DOM格式插入到頁面

（3）goToRout()：路由跳轉(zhuǎn)方法

（4）toolTipContent：提示的內(nèi)容信息

element表格(el-table)自定義復(fù)選框(添加提示el-tooltip)

需求

表格想要存在禁用的行，用戶想要有提示：為什么不可以勾選?。。。ㄈ缦聢D）

實(shí)現(xiàn)

使用表格自帶的復(fù)選框無法實(shí)現(xiàn)該功能，因此需要自定義復(fù)選框

html代碼：

<el-table border :data="dataList">
?? ?<el-table-column align="center">
?? ??? ?<!--下面是表頭的復(fù)選框，使用插槽header。實(shí)現(xiàn)全選以及部分選擇-->
? ? ? ? <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}">
? ? ? ? ?? ?<!--這里在復(fù)選框可用的時(shí)候禁用，不可用的時(shí)候使用el-tooltip進(jìn)行提示-->
? ? ? ? ? ? <el-tooltip :disabled="提示框禁用的條件" :content="提示語" placement="left">
? ? ? ? ? ? ?? ?<!--selection是表格中選中行的數(shù)據(jù)，類型為數(shù)組-->
? ? ? ? ? ? ?? ?<!--這里建議不要使用@change實(shí)現(xiàn)父子數(shù)據(jù)間的通信-->
? ? ? ? ? ? ? ? <el-checkbox-group v-model="selection">
? ? ? ? ? ? ? ? ?? ?<!--此處的label是復(fù)選框右邊顯示的值，也是選中后的值。如果要一行的數(shù)據(jù)，直接使用row即可-->
? ? ? ? ? ? ? ? ? ? <el-checkbox :disabled="復(fù)選框禁用條件" :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: [],//這個(gè)指沒有被禁用的行，進(jìn)來組件的時(shí)候需要自己處理下
? ? ? ? ? ? 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)
? ? ? ? ? ? ? ? //這里采用監(jiān)聽selection的變化而不是使用el-checkbox-group的change事件是因?yàn)椋?
? ? ? ? ? ? ? ? // 在change事件中往父組件發(fā)消息時(shí)，表單已經(jīng)完成了異步的驗(yàn)證，所以無法在表單驗(yàn)證前將選中的值發(fā)給父組件
? ? ? ? ? ? ? ? if (this.enabledDataList.length) {//這個(gè)條件是判斷需要有。。。。
? ? ? ? ? ? ? ? ? ? let checkedCount = v.length;
? ? ? ? ? ? ? ? ? ? this.isCheck = checkedCount === this.enabledDataList.length;
? ? ? ? ? ? ? ? ? ? this.indeterminate = checkedCount > 0 && checkedCount < this.enabledDataList.length;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$emit('input', v)
? ? ? ? ? ? },
? ? ? ? ? ? immediate: true
? ? ? ? }
? ? }
}

上面是實(shí)現(xiàn)代碼的demo，親測可以實(shí)現(xiàn)功能。

這里存在一個(gè)大坑（表單驗(yàn)證）

這表格我需要復(fù)用，因此我寫成一個(gè)組件的形式，因此需要使用$emit(‘input’,選中的行)進(jìn)行傳值，但是這里存在一個(gè)問題，就是：我本用<el-checkbox-group @change=“handleChange”>，在handleChange將改變的值傳給父組件中的表格，在表格中我將該項(xiàng)設(shè)為必填，因此需要表單驗(yàn)證，但是這個(gè)的@change事件在表單驗(yàn)證之后才執(zhí)行（我測試后得出的結(jié)果），因此選中一行的時(shí)候總會(huì)提示必填，即表單驗(yàn)證不通過。

解決辦法：

使用watch監(jiān)聽selection變量

效果

小優(yōu)化

若不想要顯示復(fù)選框右邊的文字（由el-checkbox 的label設(shè)置，必填要有值），可以使用visibility: hidden;

.el-checkbox__label {
? ? visibility: hidden;
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論