vue-Treeselect 使用备注

<head>
<!-- include Vue 2.x -->
    <script src="https://cdn.jsdelivr.net/npm/vue@@^2"></script>
    <!-- include vue-treeselect & its styles. you can change the version tag to better suit your need. -->
    <script src="https://cdn.jsdelivr.net/npm/@@riophae/[email protected]/dist/vue-treeselect.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@riophae/[email protected]/dist/vue-treeselect.min.css">
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>


<div id="app" style="width:60%;height:100px;">
<input type="hidden" asp-for="AuthItems" v-model="value" />
<treeselect :value-consists-of="valueConsistsOf" /*代表全选子节点时，不会只是显示父节点，也是父节点不显示，显示所有子节点*/   :flat="true"/*表示父节点也会显示*/  v-model="value" :multiple="true" :options="options" placeholder="请选择授权项目" />
</div>

<script>
Vue.component('treeselect', VueTreeselect.Treeselect)
var app = new Vue({
el: '#app',
data: {
valueConsistsOf: 'LEAF_PRIORITY',
// define default value
value: [@Model.AuthItems],//默认选中
// define options
options: [],
},
//初始化方法
mounted: function () {
this.LoadTree();
},
methods: {
//加载修改树结构json
LoadTree: function () {
var that = this;
console.log("==============================");
axios.post('/@Html.A()/Dialog/GetSurgicalClassification', {})
.then(function (res) {
console.log(res.data);
that.options = res.data; 
})
.catch(function (error) {
console.log(error);
});

//this.options = [{
// id: 1,
// label: 'a',
// children: [{
// id: 2,
// label: 'aa',
// }, {
// id: 3,
// label: 'ab',
// }],
//}, {
// id: 4,
// label: 'b',
//}, {
// id: 5,
// label: 'c',
//}];
}
}
})

</script>
vue-Treeselect 使用备注

猜你喜欢
