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/vue-treeselect@0.0.37/dist/vue-treeselect.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@riophae/vue-treeselect@0.0.37/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>
更多精彩文章请关注我们的微信公众号FocusDotCore: