树形多选下拉框

1.vue-treeselect

官网：https://vue-treeselect.cn/

npm install --save @riophae/vue-treeselect

通过npm安装vue-treeselect

// import the component

  import Treeselect from '@riophae/vue-treeselect'

  // import the styles

  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

components: {    UserInfo, DialogTitle,Treeselect  },

引入treeselect

<div style="display: flex">

              <el-form-item   label="品名"     prop="productNameList"    label-width="45px"     >

              </el-form-item>

              <treeselect

                :multiple="true"

                :options="productNameList"

                placeholder="请选择品名"

                :flat="true"

                v-model="dataForm.productName"

                :normalizer="normalizer"

                :show-count="true"

                :matchKeys="['label', 'pinyin']"

                style="width: 320px"

                :select="huancun()"    />

            </div>

normalizer(node) {

      return {

        id: node.code,

        label: node.name,

        children: node.children,

      };

    },

normalizer 用于规范化源数据

multiple 多选

matchKeys 过滤对象的哪些键  :matchKeys="['label', 'pinyin']"   可根据label和pinyin搜索

disableBranchNodes 是否阻止选择分支节点