vue-treeselect 项目中应用出现的一些问题

Z时代
2024-01-10
分类：综合

vue

https://vue-treeselect.js.org/ 官网

npm install --save @riophae/vue-treeselect

在页面中引入


        <template v-else-if="S_col.TYPE == 'treeSelect'">
          <div :class="['zw-block', 'zw-textleft', {'zw-no-label': !S_col.LABEL}]" >
            <treeselect :multiple="false" :options="treeOption[S_col.NAME]" :flat="false" :default-expand-level="1" v-model="FORMS_VALUE[S_col.NAME]"  :name="S_col.NAME" />
          </div>
        </template>
        <template v-else-if="S_col.TYPE == 'treeSelectMult'">
          <div :class="['zw-block', 'zw-textleft', {'zw-no-label': !S_col.LABEL}] " >
            <treeselect :multiple="true"  :options="treeOptionMult[S_col.NAME]"  :default-expand-level="1" v-model="FORMS_VALUE[S_col.NAME]"   :name="S_col.NAME" />
          </div>        </template>

单选

多选

 $gettree(){   //树形下拉框
        var datas = this.STRUCT;
        for(var i=0;i<datas.length;i++){
          for(var j=0;j<datas[i].CONTENT.length;j++){
            //单选
            if(datas[i].CONTENT[j].TYPE=='treeSelect'){
              var treeradio={
                name:datas[i].CONTENT[j].NAME,
                tree: datas[i].CONTENT[j].OPTION
              };
              this.FORMS_VALUE[treeradio.name] = null;  
              this.treeOption[treeradio.name] = (treeradio.tree);
            }
            //  多选
            if(datas[i].CONTENT[j].TYPE=='treeSelectMult'){
              var treecheckbox={
                name: datas[i].CONTENT[j].NAME,
                tree: datas[i].CONTENT[j].OPTION
              };
              this.FORMS_VALUE[treecheckbox.name] = [];   //多选的初始值要设置为空，因为是数组。不设置会报错
              this.treeOptionMult[treecheckbox.name] = (treecheckbox.tree);
            }
          }
        }      },