Vue-treeselect

最新推荐文章于 2024-08-09 07:26:23 发布

weixin_33716154

最新推荐文章于 2024-08-09 07:26:23 发布

阅读量1.6k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/discussjava/blog/2249311

版权

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

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

文档地址

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

代码示例

// html
<el-form-item label="选择" prop="dzzJbxxIds" v-if="formExportVisible == 'select'">
          <treeselect
            :options="parentIdOptions"
            :normalizer="normalizer"
            :default-expand-level="1"
            :show-count="true"
            :multiple="true"
            placeholder="请选择"
            v-model="formExportData.dzzJbxxIds"
          />
        </el-form-item>
        <el-form-item label="选择字段" prop="dzzJbxxIds" v-if="formExportVisible == 'select'">
          <treeselect
            :options="treeSelectExportOptions"
            :normalizer="normalizer"
            :default-expand-level="1"
            :show-count="true"
            :multiple="true"
            placeholder="请选择导出字段"
            v-model="formExportData.exportFields"
          />
        </el-form-item>

// 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