树形多选下拉框

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'

引入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 是否阻止选择分支节点