左树列表模版（crud）

1、复制粘贴直接使用，修改接口即可

<template>
    <div class="tree-style">
        <div style="margin-right: 5px;">
            <el-input clearable placeholder="搜索课件分类" v-model="inputValue" @input="queryTraining"
                      @clear="clearQuery" size="small"></el-input>
        </div>
        <div class="title-style" style="display: flex;justify-content: space-between;padding: 5px 5px;">
            <div>
                <span class="tree-title">课件分类列表</span>
            </div>
            <div>
                <el-button v-if="permissionList.addclassBtn" type="primary" plain size="small"
                           @click="handleAdd('add')">添加分类
                </el-button>
            </div>
        </div>
        <div style="padding-left: 7px;">
            <el-tree
                    :data="trainingTypeList"
                    @node-click="handleNodeClick"
                    class="industry-tree"
                    :default-expanded-keys="nodeIndex"
                    :highlight-current="true"
                    node-key="id"
                    ref="treeRef">
                <template #default="{ node, data }">
                    <div style="display: flex;justify-content: space-between;width: 100%;
">
                        <div style="">
                            <span :title="data.name" class="treeLabel">{{ data.name }}</span>
                        </div>
                        <div style="margin-right: 5px;min-width: 52px;text-align: left">
                            <el-icon v-if="permissionList.addclassSonBtn" title="新增子项" color="#409eff"
                                     @click="handleAdd(data)">
                                <Plus/>
                            </el-icon>
                            <el-icon v-if="permissionList.editclassBtn" title="修改" style="margin: 0 5px" color="#409eff"
                                     @click="handleEdit(data)">
                                <Edit/>
                            </el-icon>
                            <el-icon v-if="data.children==undefined && permissionList.removeclassBtn " title="删除"
                                     color="#f67676" @click="handleDel(data)">
                                <Delete/>
                            </el-icon>
                        </div>
                    </div>
                </template>
            </el-tree>
        </div>
    </div>

    <!--    // 添加分类-->
    <el-dialog :title="title"
               v-model="box"
               width="400px"
               :before-close="beforeClose"
               destroy-on-close
               draggable
               append-to-body>
        <el-form :rules="rules" ref="formRef" :model="form" label-width="93px" inline
                 size="small">
            <el-row :gutter="24">
                <!-- 表单字段 -->
                <el-col v-if="parentView" :span="24">
                    <el-form-item label="父级分类" prop="parentId" style="width: 100%">
                        <el-input v-model="form.parentName" placeholder="父级分类" readonly/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="分类名称" prop="name" style="width: 100%">
                        <el-input v-model="form.name" placeholder="请输入课件名称"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="排序" prop="sort" style="width: 100%">
                        <el-input v-model="form.sort" placeholder="请输入课件名称"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- 表单按钮 -->
        <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" icon="el-icon-circle-check" size="small" @click="handleSubmit">保 存</el-button>
          <el-button icon="el-icon-circle-close" size="small" @click="box = false">取 消</el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script setup>
  import { getWareList, wareUpdate, wareDel } from '@/api/study/courseware';
  import { defineEmits } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { getDictionary } from '@/api/system/dictbiz';
  import { computed, onMounted, reactive, ref, shallowRef, watch, nextTick, onBeforeUnmount } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { remove } from '@/api/exam/exam';
  import { useStore } from 'vuex';


  // 接参
  const props = defineProps({
    // 选择合作单位组件样式
    treeStyle: {
      width: Number,
      height: 500,
      padding: Number
    },
    //选中行业类型下数据的参数
    page: {
      currentPage: Number,
      pageSize: Number
    }
  });

  const store = useStore();

  const nodeIndex = ref([]);

  //搜索框输入字段
  const inputValue = ref('');
  //培训项目显示列表
  const trainingTypeList = ref([]);
  //培训项目搜索过滤存储列表
  const trainingTempList = ref([]);
  //培训项目接口数据列表
  const trainingNameList = ref([]);


  const emit = defineEmits(['selectNode']);

  // 计算属性获取按钮权限
  const permissionList = computed(() => {
    //按钮权限
    const storeState = store.getters.permission;
    //初始化按钮权限
    return reactive({
      addclassBtn: storeState.courseware_addclass,
      addclassSonBtn: storeState.courseware_addclassSon,
      editclassBtn: storeState.courseware_editclass,
      removeclassBtn: storeState.courseware_removeclass
    });
  });
  //点击行业分类树节点
  const handleNodeClick = (data) => {
    emit('selectNode', data);
  };

  //搜索输入框
  const queryTraining = () => {
    if(inputValue.value==''){
      init();
    }else{
      trainingNameFilter(inputValue.value);
    }
  };

  //清空输入框
  const clearQuery = () => {
    inputValue.value = '';
    trainingTypeList.value = trainingNameList.value;
  };

  //过滤培训项目列表
  const trainingNameFilter = (queryString) => {
    trainingTempList.value = queryString ? trainingTypeList.value.filter(item => item.name.indexOf(queryString) != -1) : trainingTypeList.value;
    trainingTypeList.value = trainingTempList.value;
  };


  const init = () => {
    getWareList().then(res => {
      trainingTypeList.value = res.data.data;
    });
  };

  /**********弹窗事件*********************/
  const box = ref(false);
  const form = ref({});
  const formRef = ref();
  const title = ref('');
  const parentView = ref(false);
  // 表单校验
  const rules = ref({
    name: [{
      required: true,
      message: '请填写名称'
    }]
  });

  const handleAdd = (e) => {
    form.value = {};
    nodeIndex.value[0] = e.id;
    if (e == 'add') {
      form.value.sort = trainingTypeList.value.length + 1;
      parentView.value = false;
      title.value = '添加分类';
    } else {
      if (e.children == undefined) {
        form.value.sort = 1;
      } else {
        form.value.sort = e.children.length + 1;
      }
      form.value.parentId = e.id;
      form.value.parentName = e.name;
      parentView.value = true;
      title.value = '添加子项';
    }
    box.value = true;
  };
  // 编辑
  const handleEdit = (row) => {
    form.value = {};
    let result = trainingTypeList.value.filter(element => element.id == row.parentId);
    if (row.parentId == 0) {
      parentView.value = false;
      form.value = row;
    } else {
      parentView.value = true;
      form.value = row;
      result.map(item => {
        form.value.parentName = item.name;
      });
    }
    box.value = true;
  };
  // 删除
  const handleDel = (row) => {
    ElMessageBox.confirm('确定将选择数据删除?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        return wareDel(row.id);
      })
      .then(() => {
        init();
        ElMessage({
          type: 'success',
          message: '操作成功!'
        });
      });
  };
  const handleSubmit = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        wareUpdate(form.value).then(() => {
          init();
          box.value = false;
          ElMessage({
            type: 'success',
            message: '操作成功!'
          });
        });
      }
    });
  };
  const beforeClose = () => {
    box.value = false;
  };

  /**********弹窗事件end******************/


  onMounted(() => {
    init();
    // trainingTypeList.value =lsDates.value;
  });

</script>

<style scoped>

    /*左侧树样式*/
    .tree-style {
        box-sizing: border-box;
        /*border-right: 1px solid #dcdfe6;*/
        margin-bottom: 20px;
        overflow-x: hidden;
    }

    /*标题行样式*/
    .title-style {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        padding-left: 7px
    }

    /*标题样式*/
    .tree-title {
        line-height: 30px;
        font-size: 13px;
        color: #3d3d3d;
        font-weight: bold;
    }

    .industry-tree{

    }
</style>