vue-treeselect 安装及使用
1、建议通过npm安装vue-treeselect,并使用webpack之类的捆绑器来构建您的应用程序。npm install --save @riophae/vue-treeselect2、本示例说明如何将vue-treeselect与Vue SFCs集成在一起。<!-- Vue SFC --><template><div id="app"><trees
·
参考地址:https://vue-treeselect.js.org/
1、建议通过npm安装vue-treeselect,并使用webpack之类的捆绑器来构建您的应用程序。
npm install --save @riophae/vue-treeselect
2、本示例说明如何将vue-treeselect与Vue SFCs集成在一起。
<!-- Vue SFC -->
<template>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
// register the component
components: { Treeselect },
data() {
return {
// define the default value
value: null,
// define options
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa',
}, {
id: 'ab',
label: 'ab',
} ],
}, {
id: 'b',
label: 'b',
}, {
id: 'c',
label: 'c',
} ],
}
},
}
</script>
3、实例
<TreeSelect v-model="ruleForm.comName" :appendToBody="true" placeholder="请选择" :multiple="true" :flat="true" :sort-value-by="sortValueBy" :default-expand-level="1" :normalizer="normalizer" :options="treeData" style="width:100%"/>
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { TreeSelect },
data() {
return {
normalizer(node) {
if (node.child == null || node.child == "null") {
delete node.child;
}
return {
id: node.id,
label: node.name,
children: node.child,
};
},
sortValueBy: "ORDER_SELECTED",
treeData: [{
"id": "10363019578370",
"name": "中国集团有限公司",
"child": [{
"id": "1353931643010",
"name": "研究所",
"child": [{
"id": "13646729090",
"name": "测试有限公司",
"child": [{
"id": "13695725506",
"name": "四级单位",
"child": null
}, {
"id": "1369667522",
"name": "第二个四级单位",
"child": null
}]
}, {
"id": "1368708652545",
"name": "分公司",
"child": null
}]
}, {
"id": "135398871778",
"name": "有限公司",
"child": null
}, {
"id": "135399959042",
"name": "一级公司",
"child": [{
"id": "1353011516161",
"name": "二级公司",
"child": [{
"id": "13332487041",
"name": "四级",
"child": [{
"id": "137745549121",
"name": "五级",
"child": null
}]
}]
}]
}, ]
}, ]
}
},
}
<style lang='scss'>
.vue-treeselect__multi-value-item-container {
line-height: 17px;
}
.vue-treeselect__label{
font-size:14px !important;
color: #606266 !important;
font-weight: 500 !important;
font-family: sans-serif !important;
}
.TreeSelect .el-form-item__content {
line-height: 32px;
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)