element Cascader 級聯選擇器 選擇任意一級選項 以及點文字即可選中（去掉單選按鈕）

目標效果：

1、vue項目中需要使用el-cascader組件，可以選擇任意一級的內容
 
預想效果圖： （有兩級情況下，想只選擇一級，就只選擇一級）

 

 

 

遇到的問題：
1、使用 使用官方案例的 （多選 單選框）直接點擊 小圓點，點擊文字沒有效果。
2、想直接點擊文字可以選中，如果有三級也隨便打開三級，並且移除掉單選按鈕。
 
解決方案：

  解決可以任選一個選項方法：

// 使用官方提供的 checkStrictly 參數即可
 
checkStrictly: true
 
// 案例：
 
 <el-cascader
    :options="options"
    :props="{ checkStrictly: true }"
    clearable>
 </el-cascader>

解決點擊文字即可選中，並移除單選按鈕：

// 當使用了 checkStrictly 就會出現單選按鈕，使用樣式修改即可
<style rel="stylesheet/less">
    .el-cascader-panel .el-radio{
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .el-cascader-panel .el-radio__input{
        visibility: hidden;
    }
    .el-cascader-panel .el-cascader-node__postfix {
        top: 10px;
    }
</style>

 特別注意：這里樣式一定是less語法，vue項目需要  npm install less less-loader -s 安裝兩個依賴才能生效。

參考自：https://blog.csdn.net/weixin_41854372/article/details/116838963