文章目录

• 一、代码示例-父组件调用
• 二、代码示例-子组件
• 总结

一、代码示例-父组件调用

<myCellTree v-model="test" title="测试"></myCellTree>

二、代码示例-子组件

/* vant@2.8.1暂时只支持二级联动，更多的没有测试注意:defaultIndex="defaultIndex[0]"，defaultIndex[0]意味着第一级选中的下标this.$refs.cellTreePicker.setColumnIndex(1, this.defaultIndex[1]);依照文档意思setColumnIndex第一个参数应该是第一列的激活下标，但是经过测试根本无效，设置为1时效果正常，第一层依旧依托于:defaultIndex */ <template><div class="myCellTree"><van-cell :title="title" :value="text" is-link @Click="showPopup" /><van-popup v-model="visible" position="bottom"><van-pickerref="cellTreePicker":title="'选择' + title"show-toolbar:defaultIndex="defaultIndex[0]":columns="columns"@confirm="choosePicker"@cancel="closePicker"/></van-popup></div> </template> <script> export default {name: "MyCellTree",model: {prop: "value",},props: {title: {type: String,default: "",},value: null,clearable: {type: Boolean,default: false,},list: {type: Array,default: function () {return [{dictCode: "10",dictName: "沥青路线养护",childDict: [{dictCode: "101",dictName: "基层维修",},{dictCode: "102",dictName: "裂缝维修",},{dictCode: "106",dictName: "剥落维修",},],},{dictCode: "20",dictName: "水泥混凝土路面养护",childDict: [{dictCode: "201",dictName: "日常养护",},{dictCode: "202",dictName: "裂缝维修",},],},];},},prop: {type: Object,default: function () {return {code: "dictCode",name: "dictName",children: "childDict",};},},},data() {return {choose: null,text: "",columns: [],list_: [],defaultIndex: [],visible: false,};},watch: {value(val) {this.choose = val;this.setDefaultIndex();},list(val) {this.list_ = [...val];this.setColumns();this.setDefaultIndex();},},async mounted() {if (this.list.length) this.list_ = JSON.parse(JSON.stringify(this.list));this.choose = this.value;this.setColumns();this.setDefaultIndex();},methods: {loopTree(arr, fatherIndex_ = -1) {arr.forEach((item, index) => {item.text = item[this.prop.name];item.code = item[this.prop.code];item.children = item[this.prop.children];item.index_ = index;item.fatherIndex_ = fatherIndex_;if (item[this.prop.children]?.length) {this.loopTree(item[this.prop.children], item.index_);}});},findIndex(arr, code) {arr.forEach((item, index) => {if (item.code === code) {this.defaultIndex = [item.fatherIndex_, index];this.text = item.text;this.choose = item.code;}if (item.children?.length) {this.findIndex(item.children, code);}});},// 设置columnssetColumns() {this.loopTree(this.list_);this.columns = this.list_;},showPopup() {this.visible = true;this.$nextTick(() => {this.$refs.cellTreePicker.setColumnIndex(1, this.defaultIndex[1]);this.$forceUpdate();});},choosePicker() {let data = this.$refs.cellTreePicker.getValues();this.choose = data[data.length - 1].code;this.text = data[data.length - 1].text;this.$emit("input", this.choose);this.$forceUpdate();this.visible = false;},closePicker() {if (this.clearable) {this.choose = null;this.text = null;}this.visible = false;},// 设置默认选择setDefaultIndex() {let arr = JSON.parse(JSON.stringify(this.list_));this.findIndex(arr, this.choose);},}, }; </script>

总结

vant@2.8.1
1.暂时只支持二级联动，更多的没有测试
2. 注意:defaultIndex=“defaultIndex[0]”，defaultIndex[0]意味着第一级选中的下标
3.this.$refs.cellTreePicker.setColumnIndex(1, this.defaultIndex[1]);
4.依照文档意思setColumnIndex第一个参数应该是第一列的激活下标，但是经过测试根本无效，设置为1时效果正常，第一层依旧依托于:defaultIndex

总结

以上是生活随笔为你收集整理的vant+cell+picker+级联选择默认选中的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。