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并實現點擊跳轉”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！