1.vue-treeselect
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 是否阻止选择分支节点
