美文网首页帖子收藏
Element UI各种使用问题汇总(Cascader、Tree

Element UI各种使用问题汇总(Cascader、Tree

作者: microkof | 来源:发表于2020-08-27 10:11 被阅读0次

    后端同学说,只希望前端将Cascader(级联选择器)选中的叶子节点的value上传,不想直接要Cascader(级联选择器)change事件的value,怎么办?

    后端同学认为change事件的value的前面的几个元素对他毫无用处,他不想接收。怎么办?

    办法至少有2个:

    第一个办法是从value取末位元素就好了。form.aaa照传服务器,但是不作数,form.bbb才是后端想要的东西。

      <el-cascader
        v-model="form.aaa"
        :options="options"
        @change="form.bbb = $event[$event.length-1]"></el-cascader>
    

    第二种办法,官方手册提供了一个方法叫getCheckedNodesgetCheckedNodes()得到一个数组,Cascader是单选的话就是一个元素,是多选的话可能会有多个元素,每个元素是一个大对象,取其中的value即可。用法是(假设Cascader是多选):

      <el-cascader
        ref="xxx"
        v-model="form.aaa"
        :options="options"
        @change="form.bbb = $refs.xxx.getCheckedNodes().map(v=>v.value)"></el-cascader>
    

    后端同学又说,他只想把叶子节点的值返回前端,但Cascader(级联选择器)的值是数组,所以,现在只知道末尾元素的前提下,如何推算出整个数组?

    我们知道单选模式下Cascader的值一定是数组,哪怕只有一个元素也是[value]的形式。

    假设我们创建表单的时候,向服务器提交的数据是[22, 35]

    后来我们编辑表单,服务器向前端返回的值,由于各种原因吧,后端只给你返回了35这个数值(或字符串),而你并不知道数组前面的元素有几个、各是多少。也就是说,你编辑表单的时候,如果不原样给Cascader传[22, 35],Cascader是不会正确显示当前值的,但你又的确不知道前面的元素。

    怎么办?

    可以新建一个方法,采用循环+递归,谁命中35谁就return valueArr,这个valueArr就是Cascader需要的值。

          queryCascader(value, children, valueArr = []) {
            for (var i = 0; i < children.length; i++) {
              const item = children[i];
              if (item.value === value) {
                return valueArr.concat([value]);
              } else if (item.children) {
                const result = this.queryCascader(value, item.children, valueArr.concat([item.value]));
                if (result) {
                  return result;
                }
              }
            }
          }
    

    使用:

    不支持多选的话,使用很简单:

    const result = this.queryCascader(35, this.thatOptions);
    

    支持多选的话,无非是服务器返回一个数组,或者也是分着返回,但前端可以组成一个数组,这时候map一下就好了:

    const resultList = ['564', '324'].map(v => {
      return this.queryCascader(v, this.thatOptions);
    });
    

    如果想获得级联的Label呢?写法也类似,略作修改:

        queryCascaderLabels(value, children, labelArr = []) {
          for (var i = 0; i < children.length; i++) {
            const item = children[i];
            if (item.value === value) {
              return labelArr.concat([item.label]);
            } else if (item.children) {
              const result = this.queryCascaderLabels(value, item.children, labelArr.concat([item.label]));
              if (result) {
                return result;
              }
            }
          }
        },
    

    如何让Cascader默认显示它的第一大项的第一小项的第一更小项的……?

    首先我们得计算出它的第一大项的第一小项的第一更小项的……是哪个。依然用递归。data初始传入Cascader数组对象,result初始传入[]

        recurFirst(data, result) {
          if (data[0].children) {
            return this.recurFirst(data[0].children, result.concat[data[0].value])
          } else {
            return result.concat(data[0].value);
          }
        },
    

    啥时候用Cascader(级联选择器)?啥时候用Tree(树形控件)?

    1. Cascader(级联选择器)的级联面板跟Tree更像一些,不过级联面板是向右延伸,Tree是向右也向下延伸。

    2. Cascader(级联选择器)只能同时展开一条路,不能全体展开,Tree可以全部展开。

    3. Cascader(级联选择器)想勾选一个中层节点,必须设置“父子节点取消关联”,而且,勾选中层节点不代表它的下层会被自动勾选,而Tree一旦勾选了中层节点,则下层所有节点都会被自动勾选。

    4. 如果你的场景是“分类型场景”,这种场景往往只想要叶子节点,那么可能Cascader(级联选择器)会更好用一点,如果你的场景是“架构型场景”,例如大大小小的部门架构上都挂载着部门名称、领导、员工、资金……,也就是说你不是只要叶子节点,你是中层和叶子全要,那么必然要用Tree。

    5. 对Cascader(级联选择器)只传递一个中层节点的值是无效的,value必须从顶层value开始,但是对Tree可以传递任何一个节点的值,Tree都会把它和它的所有后代全勾上,且把它的各级祖先“半勾选”。

    6. 上传时:对于Cascader(级联选择器),后端同学可能会说“我只需要change事件value的末位元素”,这往往没任何问题,但是对于Tree,就要看具体场景,如果需要上传中层节点,那么后端同学就必须接收中层节点,因为value中每一个元素都是有用的。如果不需要中层节点,那么后端同学依然可以要求只传末位元素(但这种场景,更应该考虑使用Cascader(级联选择器))。

    7. 返回时:对于Cascader(级联选择器),后端同学假如只给前端返回value末位元素,前端通过自己递归计算(上文说过了)是可以推算出组件需要的value的,但是对于Tree,前端给后端传value,后端就必须全接住,因为全有用,后端给前端发value可以全发,也可以只发叶子节点,Tree会自动计算,然后自动勾选上层节点,并不需要自己写一个递归函数。

    相关文章

      网友评论

        本文标题:Element UI各种使用问题汇总(Cascader、Tree

        本文链接:https://www.haomeiwen.com/subject/uztcsktx.html