美文网首页
el-tree 改变背景颜色和文字颜色

el-tree 改变背景颜色和文字颜色

作者: 偶头像超凶 | 来源:发表于2022-05-30 15:37 被阅读0次

如果默认有选中值,那么这个必不可少

this.$nextTick(()=>{
 this.currentKey = data.code
 this.$refs['tree'].setCurrentKey(this.currentKey)
})
<template>
  <div v-loading="loading" class="region-tree">
    <div class="region-tree-search">
      <el-input v-model="searchForm.name" placeholder="请输入区划名称" maxlength="50" />
      <el-button
        style="margin-left: 15px;"
        type="primary"
        :loading="loading"
        @click="handleSearch"
      >查询</el-button>
    </div>
    <div class="region-tree-wrap">
      <div class="region-tree-wrap-width">
        <el-tree
          class="tree"
          ref="tree"
          :data="treeData"
          :props="treeProps"
          node-key="code"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          default-expand-all
          :highlight-current="true"
          :current-node-key="currentKey"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getRegionTree } from '@/api/system/dept'
export default {
  name: 'RegionTree',
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    fetchFn: { // 请求接口函数
      type: Function,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      searchForm: {
        name: ''
      },
      treeProps: {
        children: 'children',
        label: 'desc'
      },
      treeData: [],
      currentKey: ''
    }
  },
  created() {
    this.fetchRegionTree()
  },
  methods: {
    handleSearch() {
      this.$refs.tree.filter(this.searchForm.name)
    },
    handleNodeClick(data) {
      if (data.level === 6) {
        this.$emit('input', { code: data.code, desc: data.desc })
        this.$emit('change')
      }
    },
    fetchRegionTree() {
      this.loading = true
      getRegionTree({})
        .then(res => {
          this.treeData = res.data || []
          if (this.treeData[0] == 1) { // level: 6
             let data = this.treeData[0]
             this.handleNodeClick(data)
             this.$nextTick(()=>{
               this.currentKey = data.code
               this.$refs['tree'].setCurrentKey(this.currentKey)
             })
           }
          this.loading = false
        })
        .catch(e => {
          this.loading = false
        })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.desc.indexOf(value) !== -1
    }
  }
}
</script>
<style lang="scss" scoped>
  .region-tree {
    position: relative;
    height: calc(100vh - 145px);
    width: 270px;
    padding-top: 50px;
    &-search {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      height: 30px;
      /*margin-bottom: 20px;*/
    }
    &-wrap {
      height: calc(100vh - 195px);
      overflow: auto;
      &-width {
        width: 500px;
      }
    }
  }
  ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    color: #0066FF !important;
  }
</style>

相关文章

网友评论

      本文标题:el-tree 改变背景颜色和文字颜色

      本文链接:https://www.haomeiwen.com/subject/vqvoprtx.html