vant v2 版本 van-cascader实现部分选项禁用

• vantv2.12.4以上可适用
• vant2官方文档：https://vant-ui.github.io/vant/v2/#/zh-CN/cascader
  vant3和vant4均支持在数据源中放入disabled: true实现部分选项禁用，如果合适可升级成vue3项目，然后使用vant3或者vant4

效果图

思路：

存储一个不可选择的id数组，自定义van-cascader的option，判断当前option的id属于不可选择的时候，设置禁用样式，同时在@finish拦截关闭和选择赋值事件。

数据源：

const list = [
   {
       id: 1,
       name: "耗材",
       children: [
           { id: 14, name: "公牛电线2芯1平方", stock: 0 },
           { id: 15, name: "公牛电线2芯2.5平方", stock: 1 },
           { id: 16, name: "国标珠江电线3芯2.5平方", stock: 0 },
       ],
   },
   {
       id: 2,
       name: "工具",
       children: [
           { id: 17, name: "2公牛电线2芯1平方", stock: 0 },
       ],
   },
   {
       id: 3,
       name: "其他",
       children: [
           { id: 20, name: "3公牛电线2芯1平方", stock: 0 },
       ],
   },
];

html代码

	<style>
   	.option_name{}
   	.option_name.optdisabled{ color:#999;}
   	.option_name.optdisabled ~ .van-icon{ opacity:0;} /*隐藏选择的 √ */
   	.option_stock{ display:inline-block; color:#999; font-size:12px; margin-left:6px;}
   </style>
   <div @click="addPicker">添加</div>
   <div v-for="(item, key) in apply_arr" @click="onShowPicker(key)">选择第{{ key + 1 }}项，结果：{{ item.name }}</div>
   <van-popup v-model="picker.show" position="bottom">
       <van-cascader v-model="cascaderValue" title="请选择类型" :options="list" :field-names="{ text: 'name', value: 'id' }" @close="onClose" @finish="onFinish">
           <template slot="option" slot-scope="scope">
               <div class="option_name" :class="{ optdisabled: scope.option.stock !== undefined && checkTypeList.includes(scope.option.id) }">
                   <span>{{ scope.option.name }}</span>
                   <div class="option_stock">{{ scope.option.stock !== undefined ? "库存：" + scope.option.stock : "" }}</div>
                   <div class="option_stock">{{ scope.option.stock !== undefined && checkTypeList.includes(scope.option.id) ? "已添加" : "" }}</div>
               </div>
           </template>
       </van-cascader>
   </van-popup>

...
   data() {
       return {
           apply_arr: [],
           cascaderValue: "",
           checkTypeList: [],
           list,
           picker: {
               show: false,
               index: 0,
           },
       };
   },
   methods: {
       addPicker() {
           this.apply_arr.push({
               type_id: "",
               name: "",
               stock: "",
           });
       },
       onShowPicker(index) {
           this.picker.index = index;
           this.picker.show = true;
       },
       onFinish(e) {
           let { key, index } = this.picker,
               { value, selectedOptions } = e;
           if (this.checkTypeList.includes(value)) {
               return false;
           }
           //在此储存选择结果
           this.apply_arr[index].type_id = value;
           this.apply_arr[index].stock = selectedOptions[selectedOptions.value].stock;
           this.apply_arr[index].name = selectedOptions[selectedOptions.value].name;
           this.picker.show = false;
           this.cascaderValue = "";
           this.checkTypeList = this.apply_arr.map((item) => item.type_id);
       },
       onClose() {
           //自己的关闭逻辑
       },
   },
...

有问题可评论或私信。