文章目錄

• 一、代碼示例-父組件調用
• 二、代碼示例-子組件
• 總結

一、代碼示例-父組件調用

<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+级联选择默认选中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。