tree自定义图标操作和长度显示

<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
        class="filter-tree"
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <div v-if="data.id == checkId">
              <el-button type="text" size="mini" @click="() => edit(data)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="text" size="mini" @click="() => append(data)">
                <i class="el-icon-circle-plus-outline"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)"
              >
                <i class="el-icon-delete"></i>
              </el-button>
            </div>
          </span>
        </span>
      </el-tree>
    </div>

    <a-modal
      title="新建目录"
      :visible="visible"
      :confirm-loading="downLoading"
      :destroyOnClose="true"
      cancelText="取消"
      okText="确认"
      @ok="downOk"
      @cancel="downHandle"
    >
      <a-form-model
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="目录名称" prop="catalogName">
          <el-input placeholder="请输入目录名称" v-model="ruleForm.catalogName">
          </el-input>
        </a-form-model-item>
        <a-form-model-item label="描述" prop="description">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入描述，1024个字符以内"
            v-model="ruleForm.description"
            maxlength="1024"
          >
          </el-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";
export default {
  data() {
    return {
      myPlayer: null,
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      checkId: null,
      visible: false,
      downLoading: false,
      operationType: 1,
      ruleForm: {},
      rules: {
        catalogName: [
          { required: true, trigger: "blur", message: "请输入目录名称！" },
        ],
        description: [
          { required: true, trigger: "blur", message: "请输入描述！" },
        ],
      },
    };
  },
  mounted() {
    this.myPlayer = videojs("myvideo");
    this.myPlayer.src([
      {
        type: "application/x-mpegURL",
        src:
          "http://39.173.75.10:10021/hls2/DE9B540175BBF591771D0BFA1622EB9C.m3u8",
      },
    ]);
    this.myPlayer.play();
  },
  methods: {
    handleNodeClick(data) {
      this.checkId = data.id;
    },
    edit() {},
    append(data) {
      this.visible = true;
      // const newChild = { id: id++, label: "testtest", children: [] };
      // if (!data.children) {
      //   this.$set(data, "children", []);
      // }
      // data.children.push(newChild);
    },

    remove(node, data) {
      console.log(node);
      console.log(data);
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    downOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.downLoading = true;
          this.visible = false;
          let params;
          if (this.operationType == 1) {
            params = {
              catalogName: this.ruleForm.catalogName,
              description: this.ruleForm.description,
              leafNode: true,
              parentId: this.selfId,
            };
            this.ruleForm = {};
            this.downLoading = false;
            createChildrenNode(params).then((res) => {});
          } else if (this.operationType == 2) {
            params = {
              catalogName: this.ruleForm.catalogName,
              description: this.ruleForm.description,
              leafNode: true,
              id: this.selfId,
            };
            this.downLoading = false;
            this.ruleForm = {};
            editNode(params).then((res) => {});
          }
        } else {
          return false;
        }
      });
    },
    downHandle() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.custom-tree-container {
  width: 700px;
  height: 800px;
  margin: 0 auto;
  margin-top: 100px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.custom-tree-container /deep/ .el-button--mini {
  font-size: 16px;
}
#myvideo {
  width: 400px;
  height: 500px;
}
</style>