el-tree-展示被选中树节点勾选顺序 +不同的节点类型展示不同的图标

效果

需求

根据自己选择的顺序在节点后面展示勾选顺序

html代码

<el-tree
       :data="deptOptions"
        node-key="treeId"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox
        ref="objTreeRef"
        default-expand-all
        @check-change="
              (item, isChecked) => treeCheckChange(item, isChecked)
         "
 >
        <span slot-scope="{ node, data }">
               <img
                  :src="icons[data.type]"
                  style="width: 16px; height: 16px"
               />
               <span style="margin-left: 5px" :title="data.name">{{data.name }}</span>
               <span
                   v-for="(item, index) in checkedObj"
                   :key="index"
                   style="display: inline-block; margin-left: 30px"
                >
               <span v-if="item.treeId == data.treeId">{{index + 1 }}</span></span>
       </span>
</el-tree>

data数据

data(){
   return {
      deptOptions: undefined,//接口获取的树节点数据 
      //tree节点不同类型对应的图标
      icons: {
        1: require("../../../assets/images/objectData/tree-five.png"),
        2: require("../../../assets/images/objectData/tree-four.png"),
      },
      checkedObj: [], //勾选顺序数组
   }
}

js代码

/**树节点 变动事件 */
treeCheckChange(item, isChecked, type) {
    //勾选顺序
    if (item.type == "2") {
        if (isChecked == true) {
            this.checkedObj.push(item);
        } else {
            this.checkedObj.forEach((listItem, listIndex) => {
                  if (listItem.treeId == item.treeId) {
                     this.checkedObj.splice(listIndex, 1);
                  }
             });
          }
      }
 },

处理编辑时回显与被选中节点

let checkedObjList = [];
checkedObjList = res.data.taskDeviceRealList.map((item) => {
     return { treeId: item.deviceTreeId, };
 });
//选中树的排序
this.checkedObj = [...checkedObjList];
this.$nextTick(() => {
      this.$refs.objTreeRef.setCheckedNodes(checkedObjList);
 });

这里此文章就编写结束啦，各位同仁看到需要指点或者有疑问的评论区留言哦