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

<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+级联选择默认选中相关推荐

Vant Weapp组件picker选择器初始默认选中
小程序使用vant-picker多列数据级联选择设置初始默认选中通过this.xx修改对应列defaultIndex的不生效,数据改变页面未渲染解决:在onReady()方法中通过selectCom ...
element级联选择框的使用~干货分享
下面是对element级联选择框的使用介绍,跟小编来看看吧~ 文章目录使用级联选择框的步骤导入使用的级联选择框渲染级联选择框获取数据解决级联选择框过长问题级联选择框过长的问题及解决办法使 ...
前端学习（1963）vue之电商管理系统电商系统之控制级联选择框的选择范围
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
html下拉框代码默认选中状态,@Html.DropDownListFor 下拉框绑定（选择默认值）
首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); Tem ...
html表格选择一行,vue + element table表格如何默认选中第一行
有一个dialog的对话框,我想要在进入对话框的时候默认选中table的第一个页面dialog部分: :model="zzc" :inline="true" ...
radio默认选中并显示相应信息 php,php实现select、radio、checkbox默认选择示例
下面为大家带来一篇 php实现select.radio.checkbox默认选择示例.下面就为你详细讲解一下,希望对您的学习PHP有所帮助. 这是扩展yibing的select默认选择的实现方法 va ...
vue element-ui只有一条信息时默认选中按钮，且不能取消，多条信息时可以手动选择
vue element-ui只有一条信息时默认选中按钮,且不能取消,多条信息时可以手动选择用lodash方法进行原数据的深拷贝 // 编辑多规格产品时必须选中一个默认规格setColumnData( ...
cascader 动态加载回显_elementUI的cascader级联选择控件的默认值(回显)问题
其实所谓回显,也只是默认值的问题.例如,一个省市联动,如果当一个用户修改自己信息的时候,那么他能看到级联选择的值,也就是说在修改页面我们给级联选择器赋值一个默认值就可以了.截图是官方文档 vchl0 ...

vant+cell+picker+级联选择默认选中

文章目录

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

二、代码示例-子组件

总结

vant+cell+picker+级联选择默认选中相关推荐

最新文章

热门文章