iview樹加圖示

效果如圖：

程式碼：

<Tree             ref="leftTreeDataRef"
                        :data="leftTreeData"
                        class="demo-tree-render"
                        @on-select-change="leftTreeChange"
                      ></Tree>

 

      leftTreeData: [], //左側樹

//methods方法中獲取樹資料及樹新增圖示的方法

/**
     * 初始化樹
     * */
    initTree() {
      let _this = this;
      try {
        const getCommTreePro = new Promise((resolve, reject) => {
          getCommTree({
            filterKey: "themeMatter",
          }).then(function (res) {
              if (res) {
                resolve(res);
              }
            }).catch(function () {
              reject();
            });
        });
        const getEarlyYearPro = new Promise((resolve, reject) => {
          getEarlyYear()
            .then(function (res) {
              if (res) {
                resolve(res);
              }
            })
            .catch(function () {
              reject();
            });
        });
        //都獲取結果後查詢表格資料
        Promise.all([getCommTreePro, getEarlyYearPro])
          .then((result) => {
            if (result[0]) {
              let res0 = result[0];
              res0.rows[0].selected = true;
              _this.leftTreeData = res0.rows;
              _this.addIcon(_this.leftTreeData);
              _this.fMatterCode = res0.rows[0].fkey;
              _this.fLb = res0.rows[0].flb;
            }
            if (result[1]) {
              let res1 = result[1];
              res1.forEach((item) => {
                _this.yearTreeData.push({
                  value: item,
                  label: item,
                });
              });
              //todo 預設當前年月
              _this.searchParam.fYear = _this.yearTreeData[0].value;
            }
            _this.getTableData();
          })
          .catch((error) => {
            _this.$Message.error(error.msg);
          });
      } catch (e) {
        _this.$Message.error("樹載入異常：" + e.message);
      }
    }, 

//左側樹新增圖示
    addIcon(rows){
      rows.forEach(item => {
        if(item.flevel === 1){
          item.render = (h, {root, node, data}) => {
            return h('span', {style: {display: 'inline-block', width: '100%'}}, [
              h('span', [
                h('Icon', {props: {type: 'ios-folder-outline'}, style: {marginRight: '8px'}}),
                h('span', data.title)
              ])
            ]);
          }
        }else {
          item.render = (h, {root, node, data}) => {
            return h('span', {style: {display: 'inline-block', width: '100%'}}, [
              h('span', [
                h('Icon', {props: {type: 'ios-paper-outline'}, style: {marginRight: '8px'}}),
                h('span', data.title)
              ])
            ]);
          }
        }
        if(item.children!= undefined && item.children.length>0){
          this.addIcon(item.children);
        }
      });
      return rows;
    },
  },