Newer
Older
operation_web / src / model / tree.vue
@yuwj yuwj on 27 Jan 2021 1 KB 集成数据滤网模块
  1. <!-- 菜单权限树型结构 -->
  2. <template>
  3. <el-tree ref='tree' accordion :current-node-key="nodeKey" :data="dataSource" node-key="id"
  4. @node-click="handleNodeClick" highlight-current :filter-node-method="filterNode">
  5. <span class="custom-tree-node" slot-scope="{ node, data }">
  6. <span><i :class="data.icon" v-if='showIcon'></i>{{data.text}}</span>
  7. </span>
  8. </el-tree>
  9. </template>
  10.  
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. dataSource: [],
  16. iconCla: 'iconfont icon-wenjian',
  17. showIcon: false,
  18. nodeKey: -10, //默认选中
  19. };
  20. },
  21. props: {
  22. datas: {
  23. type: Array,
  24. required: false
  25. },
  26. iconClass: {
  27. type: Boolean,
  28. required: false
  29. }
  30. },
  31. created() {
  32. this.showIcon = this.iconClass ? this.iconClass : this.showIcon;
  33. },
  34. watch: {
  35. datas(val, oldVal) {
  36. // 监听修改后的值
  37. this.dataSource = val;
  38. }
  39. },
  40. methods: {
  41. handleNodeClick(data) {
  42. /**
  43. * 点击节点回调
  44. */
  45. this.$emit('clickCb', data)
  46. },
  47. getCurrentNode() {
  48. /**
  49. * 获取当前选中行的值
  50. */
  51. return this.$refs.tree.getCurrentNode()
  52. },
  53. filterNode(value, data) {
  54. /**
  55. * 过滤搜索状态
  56. * @returns {Boolean} true 节点可以显示
  57. * @returns {Boolean} false 节点隐藏
  58. */
  59. if (!value) {
  60. this.$emit('treeFilter', true);
  61. return true
  62. } {
  63. if (data.text.indexOf(value) !== -1) {
  64. this.$emit('treeFilter', false)
  65. return data.text.indexOf(value) !== -1;
  66. }
  67. }
  68. },
  69. filterText(val) {
  70. /**
  71. * 搜索框过滤
  72. */
  73. this.$nextTick(() => {
  74. this.$refs.tree.filter(val);
  75. })
  76. }
  77. }
  78. }
  79.  
  80. </script>
  81.  
  82. <style scoped>
  83. </style>