vue element-ui 树形

<template>
  <div class="department-container">
    <p>栏目管理</p>
    <div style="display: flex; margin: 10px 0">
      <Button type="primary" @click="addNew">新增栏目</Button>
    </div>
    <div class="box">
      <div
        style="width: 300px; border-right: 1px solid #eee; padding-right: 4px"
      >
        栏目名称：
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
          size="mini"
          style="width: 200px"
          clearable
        >
        </el-input>

        <el-tree
          ref="tree"
          class="org-tree"
          :data="menuList"
          :props="defaultProps"
          node-key="id"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          default-expand-all
        >
          <span class="custom-tree-button" slot-scope="{ node, data }">
            <span
              :class="[data.id == id ? 'active' : '']"
              @click="itemHandle(data)"
              >{{ node.label }}</span
            >

            <span style="margin-left: 6px">
              <el-button
                type="text"
                size="medium"
                icon="el-icon-circle-plus-outline"
                @click="() => addNew(data)"
              >
              </el-button>
              <el-button
                type="text"
                size="medium"
                icon="el-icon-edit-outline"
                @click="() => edit(data)"
              >
              </el-button>

              <el-button
                type="text"
                size="medium"
                icon="el-icon-delete"
                @click="() => deleteMenu(data)"
              >
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div v-if="id" style="padding-left: 80px; width: 800px">
        <div class="title">栏目信息</div>
        <div class="content-text">
          <span class="content-text-name">父栏目名称：</span>
          <span>{{
            infoList.superiorColumn ? infoList.superiorColumn : "/"
          }}</span>
        </div>
        <div class="content-text">
          <span class="content-text-name">栏目名称：</span>
          <span>{{ infoList.columnName ? infoList.columnName : "/" }}</span>
        </div>
        <div class="content-text">
          <span class="content-text-name">描述：</span>
          <span>{{ infoList.description ? infoList.description : "/" }}</span>
        </div>
        <div class="content-text">
          <span class="content-text-name">栏目链接地址：</span>
          <span>{{ infoList.linkPath ? infoList.linkPath : "/" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  culumnManagementList,
  columnManagementDelete,
} from "@/api/columnmanage";

export default {
  components: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      filterText: "",
      menuList: [],
      defaultProps: {
        children: "children",
        label: "columnName",
      },
      id: "",
    };
  },
  created() {
    this._culumnManagementList();
  },
  mounted() {},
  methods: {
    _culumnManagementList() {
      culumnManagementList().then((res) => {
        // console.log(res, "res1111");
        if (res.data.code == "00000") {
          this.menuList = res.data.data || [];
        }
      });
    },
    // 点击节点
    itemHandle(data, resolve) {
      // 动态加载子菜单
      this.id = data.id;
      this.infoList = data;
    },
    // 打开新增修改弹窗
    addNew(data) {
      if (data) {
        let parentId = data.superiorColumnId;
        let menuId = data.id;
        this.$router.push({
          name: "columnEdit",
          params: {
            parentId: parentId,
            id: menuId,
            type: 1,
            columnName: data.columnName,
          },
        });
      } else {
        // 新增第一级
        this.$router.push({
          name: "columnEdit",
        });
      }
    },
    // 打开编辑弹窗
    edit(data) {
      let parentId = data.columnNameId;
      let menuId = data.id;
      this.$router.push({
        name: "columnEdit",
        params: {
          parentId: parentId,
          id: menuId,
          type: 2,
          columnName: data.columnName,
        },
      });
    },
    // 删除菜单
    deleteMenu(data) {
      let _this = this;
      _this.$Modal.confirm({
        title: "提示",
        content: `确定要删除吗？`,
        onOk() {
          columnManagementDelete(data.id).then((res) => {
            console.log("res", res);
            if (res.data.code == "00000") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              _this._culumnManagementList();
            } else {
              this.$message.error(res.data.desc);
            }
          });
        },
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.columnName.indexOf(value) !== -1;
    },
  },
};
</script>

<style scoped lang="less">
.department-container {
  .box {
    position: relative;
    display: flex;

    .active {
      color: #66b1ff;
    }

    .title {
      font-size: 18px;
      margin-bottom: 10px;
      // font-weight: 600;
    }

    .content-text {
      margin-bottom: 10px;
      .content-text-name {
        display: inline-block;
        width: 140px;
        text-align: right;
        letter-spacing: 2px;
        // font-weight: 600;
      }
    }
  }

  .operator {
    position: absolute;
    top: 0;
    left: 950px;
  }

  p {
    height: 30px;
    line-height: 30px;
    border: 1px solid #eaeaea;
    padding-left: 10px;
    margin-bottom: 10px;
  }
}

/deep/ .ul-style {
  position: absolute;
  top: 32px;
  left: 120px;
  width: 278px;
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 2px;
  padding: 5px 0px;
  max-height: 200px;
  overflow-y: auto;

  li {
    list-style: none;
    padding: 5px 10px;
  }

  li:hover {
    background: #eeeeee;
    cursor: pointer;
  }
}
</style>