Vue-treeselect

2019独角兽企业重金招聘Python工程师标准>>>

记录treeselect树型选择框使用方法，先简写。

文档地址

https://vue-treeselect.js.org/#customize-key-names

代码示例

// html

          
        
        
          
        

// js
return {
formExportData: {
          dzzJbxxIds: [],
          exportFields: []
        },
parentIdOptions: [],
treeSelectExportOptions: [],
normalizer(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children
          }
        }
}

多选操作，多选数据后提交到后台，在这里做数据封装处理。

previewExportData() {
        this.$refs['formExportData'].validate(valid => {
          if (valid) {
            this.activeExportData++;
            this.formExportVisible = 'preview';
            let dzzJbxxIdsStr = '';
            let exportFieldsStr = '';
            this.formExportData.dzzJbxxIds.forEach( function (v, i) {
              dzzJbxxIdsStr += v + ',';
            });
            this.formExportData.exportFields.forEach( function (v, i) {
              exportFieldsStr += v + ',';
            });
            exportData(dzzJbxxIdsStr, exportFieldsStr).then(response => {
              console.log(dzzJbxxIdsStr + ' / ' + exportFieldsStr);
              this.headerListValue = response.data.headerListValue;
              this.exportDataFile = response.data.exportDataFile;
            });
          } else {
            return false;
          }
        });
      },

 

转载于:https://my.oschina.net/discussjava/blog/2249311