elementui 树的样式和节点按钮

<template>
  <div class="app-container">
    <div class="app-content">
      <div class="searchTree">
          <el-input
            placeholder="Search"
            v-model="filterText"
            size="small"
            class="input-with-select"
            suffix-icon="el-icon-search"
            style="margin: 15px 0px"
          >
          </el-input>
        </div>
        <div class="treeBox">
          <el-tree
            ref="tree"
            :indent="0"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"//树节点点击事件
            class="filter-tree tree-line"
            node-key="areaCode"
            :render-after-expand="true"
            :default-expand-all="false"//节点是否全部展开
            :default-expanded-keys="defaultKeys"//默认展开树的节点
            :filter-node-method="filterNode"//过滤节点
            :highlight-current="treehighlight"//点击节点高亮
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node keywords_em" slot-scope="{ data }">
              <span v-if="!filterText">{{ data.areaName }}</span>
              //查询关键字为红色
              <span
                v-if="filterText"
                v-html="
                  data.areaName.replace(
                    new RegExp(filterText, 'g'),
                    `<em>${filterText}</em>`
                  )
                "
              ></span>
            </span>
          </el-tree>
        </div>
      </div>
     
    <el-dialog
      title="上级地区"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <el-input
        placeholder="Search"
        v-model="filterText2"
        size="small"
        class="input-with-select"
        suffix-icon="el-icon-search"
        style="margin: 0 0 15px 0"
      >
      </el-input>
      <div style="overflow: auto; height: 400px">
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          class="filter-tree tree-line"
          node-key="areaCode"
          :render-after-expand="true"
          :default-expand-all="false"
          :default-expanded-keys="defaultKeys"
          :filter-node-method="filterNode"
          :highlight-current="false"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node keywords_em" slot-scope="{ data }">
          //树节点前面加个单选按钮
            <el-radio
              v-model="areaTreeRadio"
              :label="data.id"
              @change="upMenuNodeClickForm(data)"
            >
              <span v-if="!filterText2">{{ data.areaName }}</span>
              <span
                v-if="filterText2"
                v-html="
                  data.areaName.replace(
                    new RegExp(filterText2, 'g'),
                    `<em>${filterText2}</em>`
                  )
                "
              ></span>
            </el-radio>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData: [],
      filterText: "",
      filterText2: "",
      defaultProps: {
        children: "children",
        label: "areaName",
      },
      treeNode: "",
      treehighlight: false,
      defaultKeys: [],
      areaTreeRadio: "",
    };
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    filterText2(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getTree();
  },
  mounted() {},
  methods: {
    upMenuNodeClickForm(data) {
    },
    //点击树节点
    handleNodeClick(data) {
    },
    // 过滤地区树
    filterNode(value, data, node) {
      if (data.areaName.indexOf(value) !== -1) {
        return true;
      }
      const level = node.level;
      if (level === 1) {
        return false;
      }
      let parentData = node.parent;
      let index = 0;
      while (index < level - 1) {
        if (parentData.data.areaName.indexOf(value) !== -1) {
          return true;
        }
        parentData = parentData.parent;
        index++;
      }
      return false;
    }
  },
};
</script>

弹窗按钮

树的样式

.el-tree em {
  color: red !important;
  font-style: normal;
}
.el-tree {
  margin-left: -16px;
  .el-tree-node:focus > .el-tree-node__content {
    background-color: #fff !important;
    // background-color: #a3d3ff !important;
  }
  .el-tree-node__content:hover {
    background-color: #E8F4FF;
  }
  &.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #a3d3ff !important;
  }
}
//树的样式
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree .el-icon-caret-right:before {
  background: url("../assets/images/jia.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 22px;
  font-size: 16px;
  background-size: 16px;
}
//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../assets/images/jian.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 22px;
  font-size: 16px;
  background-size: 16px;
}
//没有子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: url("../assets/images/file.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 22px;
  font-size: 16px;
  background-size: 16px;
}
.el-tree .el-tree-node__content {
  padding-left: 0px !important;
}

.tree-line {
  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }
  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #d9d9d9;
  }
  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #d9d9d9;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }
  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}