- <!-- 菜单权限树型结构 -->
- <template>
- <el-tree ref='tree' accordion :current-node-key="nodeKey" :data="dataSource" node-key="id"
- @node-click="handleNodeClick" highlight-current :filter-node-method="filterNode">
- <span class="custom-tree-node" slot-scope="{ node, data }">
- <span><i :class="data.icon" v-if='showIcon'></i>{{data.text}}</span>
- </span>
- </el-tree>
- </template>
-
- <script>
- export default {
- data() {
- return {
- dataSource: [],
- iconCla: 'iconfont icon-wenjian',
- showIcon: false,
- nodeKey: -10, //默认选中
- };
- },
- props: {
- datas: {
- type: Array,
- required: false
- },
- iconClass: {
- type: Boolean,
- required: false
- }
- },
- created() {
- this.showIcon = this.iconClass ? this.iconClass : this.showIcon;
- },
- watch: {
- datas(val, oldVal) {
- // 监听修改后的值
- this.dataSource = val;
- }
- },
- methods: {
- handleNodeClick(data) {
- /**
- * 点击节点回调
- */
- this.$emit('clickCb', data)
- },
- getCurrentNode() {
- /**
- * 获取当前选中行的值
- */
- return this.$refs.tree.getCurrentNode()
- },
- filterNode(value, data) {
- /**
- * 过滤搜索状态
- * @returns {Boolean} true 节点可以显示
- * @returns {Boolean} false 节点隐藏
- */
- if (!value) {
- this.$emit('treeFilter', true);
- return true
- } {
- if (data.text.indexOf(value) !== -1) {
- this.$emit('treeFilter', false)
- return data.text.indexOf(value) !== -1;
- }
- }
- },
- filterText(val) {
- /**
- * 搜索框过滤
- */
- this.$nextTick(() => {
- this.$refs.tree.filter(val);
- })
- }
- }
- }
-
- </script>
-
- <style scoped>
- </style>