Tdesign TreeSelect 树形选择 多选

这里写自定义目录标题

  • 小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据

小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据

在这里插入图片描述

TreeSelect 树形选择

在原demo基础上修改

const chineseNumber = '一二三四五六七八九十'.split('');

const generateTree = function (deep = 0, count = 10, prefix) {
  const ans = [];

  for (let i = 0; i < count; i += 1) {
    const value = prefix ? `${prefix}-${i}` : `${i}`;
    const rect = {
      label: `选项${chineseNumber[i]}`,
      value,
    };

    if (deep > 0) {
      rect.children = generateTree(deep - 1, 10, value);
    }
    ans.push(rect);
  }

  return ans;
};

Component({
  data: {
    options: generateTree(1),
    value: ['0', ['0-0', '0-1']],
    allValue: [
      ['0', ['0-0', '0-1']],
      ['1', ['1-0', '1-1']]
    ],
  },

  methods: {
    onChange(e) {
      this.setData({
        value: e.detail.value,
      });
      if (e.detail.level == 0) {
        //点击一级分类 从allValue中找到历史值 替换
        const value = this.data.allValue.find(array => array[0] === e.detail.value[0])
        if (value == null) {
          this.setData({
            value: e.detail.value,
          });
        } else {
          this.setData({
            value: value,
          });
        }
      } else {
        //判断是否包含一级分类数据
        var result = this.data.allValue.some(item => {
          if (item[0] == e.detail.value[0]) {
            return true
          }
        })
        if (result) {
          // 使用 map() 方法替换元素
          let newArr = this.data.allValue.map(item => {
            if (e.detail.value[0] == item[0]) {
              return e.detail.value;
            } else {
              return item;
            }
          });
          console.log(newArr)
          this.setData({
            allValue: newArr
          })
        } else {
          //添加元素
          this.data.allValue.push(e.detail.value)
        }

      }


    },
  },
});
上一篇:如何保障AWS根账号安全-引言


下一篇:Llama 3.1 技术研究报告-5