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

<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-picker
        ref="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);
        }
      });
    },
    // 设置columns
    setColumns() {
      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