更新记录

1.0.1（2023-08-11） 下载此版本

【修复】 如果 开启级联模式 即 cascade:true 情况下 回显 按级联模式 选中父节点

1.0.0（2023-07-24） 下载此版本

第一版发布，在【peng-tree】1.0.6版本基础上，增加实现了 【条件查询】【单选】【多选】【级联选择】【数据回/反显】等功能，因为涉及回/反显，所以仅支持同步树

平台兼容性

参数说明

问题说明

    1 如果遇到 this.$refs.gqTree._show() 抱错 undefined时 
        a 请检查 ref是否为数组 尝试 this.$refs.gqTree[0]._show()
        b 可以尝试在$nextTick 中拉起 可能是组建引入和数据渲染时间节点不同造成
    2 如果需要进行回显时 请在组建渲染之前 将 range 中 需要回显的数据 添加属性 isGqAddChecked:true 代码可参考下方示例
        a showTree方法是展示 在拉起picker 树的时候进行数据处理
        b showTree2 方法是展示纯拉起picker 数据处理放在onshow等其他生命周期即可

返回值说明

    treeConfirm(e) {
        console.log("你点击了确定")
        console.log(e)
        /**
         * e==>
         * [
         *   {id: "100", name: "测试100", value: "冗余值"}
         *   {id: "110", name: "测试110", value: "冗余值"}
         *   {id: "111", name: "测试111", value: "冗余值"}
         * ]
         * e为选中的数据数组
         * e中的对象中有id(idKey指定的字段值)、name(nameKey指定的字段)、value(allKey指定的字段)
         */
    },

代码使用示例

<template>
  <view>
    <button @click="showTree2" type="primary" style="width: 50%; margin-top: 20px;">
      打开树形选择器
    </button>
    <gq-tree
        ref="gqTree"
        :range="range"
        idKey="id"
        nameKey="name"
        allKey="value"
        childKey="children"
        pidKey="pid"
        :showSearch="true"
        :multiple="true"
        :cascade="true"
        :selectParent="true"
        :foldAll="false"
        confirmColor="#007aff"
        cancelColor="#757575"
        title="标题"
        titleColor="#757575"
        @cancel="treeCancel"
        @confirm="treeConfirm"
    >
    </gq-tree>
  </view>
</template>

<script>
export default {
  data() {
    return {
      range: [
        {
          id: "100",
          name: "测试100",
          value: "冗余值",
          children: [
            {
              id: "110",
              name: "测试110",
              value: "冗余值",
              pid:"100",
              children: [{
                id: "111",
                name: "测试111",
                value: "冗余值",
                pid:"110",
              }]
            },
            {
              id: "112",
              name: "测试112",
              value: "冗余值",
              pid:"100",
              children: [
                  {
                id: "113",
                name: "测试113",
                value: "冗余值",
                pid:"112",
              },
                {
                  id: "114",
                  name: "测试114",
                  value: "冗余值",
                  pid:"112",
                }
              ]
            }
          ]
        },
        {
          id: "200",
          name: "测试200",
          value: "冗余值",
          children: [{
            id: "220",
            name: "测试220",
            value: "冗余值",
            pid:"200",
            children: [{
              id: "222",
              name: "测试222",
              value: "冗余值",
              pid:"220",
            }]
          }]
        },
        {
          id: "300",
          name: "测试300",
          value: "冗余值"
        }
      ],
      axiosReturnRes:[
        {
          id: "111",
          name: "测试111",
          value: "冗余值",
        },
        {
          id: "113",
          name: "测试113",
          value: "冗余值",
        },
        {
          id: "222",
          name: "测试222",
          value: "冗余值",
        },
        {
          id: "300",
          name: "测试300",
          value: "冗余值"
        },

      ]
    }
  },
  methods: {
    treeCancel(e) {
      console.log("你点击了取消")
      console.log(e)
    },
    treeConfirm(e) {
      console.log("你点击了确定")
      console.log(e)
    },
    showTree() {
      //打开选择器
      const idKeysResult = this.axiosReturnRes.map((x)=>{
        return x.id
      })
      const options = JSON.parse(JSON.stringify(this.range))
      const newOptions = this.deepCheckValue(options,idKeysResult,'id','children')
      this.range = [...newOptions]

      this.$refs.gqTree._show();
      //关闭选择器
      //this.$refs.gqTree._hide();
    },
    showTree2() {
      //打开选择器
      this.$refs.gqTree._show();
      //关闭选择器
      //this.$refs.gqTree._hide();
    },
    deepCheckValue(options,values,idKey,childKey){
      return options.map((i)=>{
        if(values.indexOf(i[idKey])>-1){
          i['isGqAddChecked'] = true
        }else{
          i['isGqAddChecked'] = false
        }
        if(i[childKey] && i[childKey].length>0){
          this.deepCheckValue(i[childKey],values,idKey,childKey)
        }
        return i
      })
    }
  },
  onShow(){
    const idKeysResult = this.axiosReturnRes.map((x)=>{
     return x.id
    })
    const options = JSON.parse(JSON.stringify(this.range))
    const newOptions = this.deepCheckValue(options,idKeysResult,'id','children')
    this.range = [...newOptions]
  }
}
</script>