vue中使用treeselect
官网链接:https://vue-treeselect.js.org/1.安装依赖:npm install --save @riophae/vue-treeselect2.在使用在插件的页面引入:import Treeselect from '@riophae/vue-treeselect'// import the stylesimport '@riophae/vue-t...
·
官网链接:https://vue-treeselect.js.org/
1.安装依赖:
npm install --save @riophae/vue-treeselect
2.在使用在插件的页面引入:
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
html:
<el-form-item label="部门/公司:" prop="concactId">
<treeselect
class="xb-input-3"
v-model="userdata.concactId"
placeholder="请选择部门/公司"
:defaultExpandLevel='Infinity'
@select="selectedTree"
:options="options"
:noChildrenText="null"
>
</treeselect>
</el-form-item>
:defaultExpandLevel='Infinity':默认展开所有子菜单
components: {Treeselect},引入组件
//去除返回值为null的情况;
deleteNullChildren(option){
if(!option.children || option.children.length == 0){
delete option.children;
} else {
let options = option.children;
if(options && options.length > 0){
for(let i = 0; i< options.length; i++){
let optionChild = options[i];
this.deleteNullChildren(optionChild);
}
}
}
},
//获取部门信息;
async getDepartment(){
const response = await getDepartment(this);
const data = response.data;
if(response.code == 0){
this.options = JSON.parse(JSON.stringify(data.allDepartment).replace(/name/g, "label").replace(/nextDir/g, "children").replace(/concactId/g, "id"));
console.log("this.options");
console.log(this.options);
let options = this.options;
if(options && options.length > 0){
for(let i = 0; i< options.length; i++){
let optionChild = options[i];
this.deleteNullChildren(optionChild);
}
}
this.options = options;
}
},
效果图:
更多推荐
已为社区贡献2条内容
所有评论(0)