树组件单级的（一级树组件--新建编辑-删除）

最新推荐文章于 2024-03-05 19:30:00 发布

csstmg

最新推荐文章于 2024-03-05 19:30:00 发布

阅读量175

点赞数

分类专栏： element 深入学习前端

本文链接：https://blog.csdn.net/csstmg/article/details/116932512

版权

前端同时被 3 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

深入学习

18 篇文章 0 订阅

订阅专栏

在这里插入图片描述

 <el-row :gutter="10">
        <el-col :span="5">
          <div class="tree-wrap radius-5">
            <div class="tree-hd">
              <span class="custom-tree-node normal large-size">分组管理</span>
            </div>
            <el-scrollbar wrap-class="scrollbar-wrapper" style="">
              <el-tree v-loading="isTreeLoading" :data="treeData" :props="defaultProps" node-key="id" icon-class="el-icon-menu" :expand-on-click-node="false"
                default-expand-all accordion @node-click="handleTreeNodeClick">
                <template slot-scope="{node,data}">
                  <span class="custom-tree-node medium-size" :class="{ active: currentNode == data }">
                    <span class="tree-label">
                      <svg-icon icon-class="fold" class="icon-fold" />
                      <span>{{node.label}}</span>
                    </span>
                    <span class="el-ic" v-if="(node.label != '全部')">
                      <el-tooltip content="编辑分类" placement="top" >
                        <i class="svg">
                          <!-- <svg-icon icon-class="edit" class="svg-icon-edit" @click.stop='editTreeNode(data)'></svg-icon> -->
                          <i class="el-icon-edit-outline" @click.stop='editTreeNode(data)'></i>
                        </i>
                      </el-tooltip>
                      <el-tooltip content="删除分类" placement="top">
                        <i  class="el-icon-delete" @click.stop='removeTreeNode( data)'></i>
                        <!-- -solid -->
                      </el-tooltip>
                    </span>
                  </span>
                </template>
              </el-tree>
            </el-scrollbar>
          </div>
        </el-col>
</el-row>


<style lang="scss" scoped>
.page-container {
  position: relative;
  .content-hd {
    // float:right;
    /deep/ .el-card__body {
      padding: 30px 24px;
    }
  }
  .content-bd {
    // display: flex;
    margin-top: 10px;
    width: 100%;
    // min-height: calc(100vh - 210px);
    border-radius: 3px;
    overflow: hidden;
    /deep/ .el-card__body {
      padding: 30px 20px;
      .el-button {
        margin-top: 0;
      }
    }
  }

  .tree-wrap {
    // float: left;
    // min-width:240px;
    // width: 23%;
    height: calc(100vh - 210px);
    background: #fff;
    // overflow: hidden;
    // position: absolute;
    // top: 106px;
    // bottom: 0;
    .el-tree {
      padding: 0 20px !important;
      .el-tree-node__content {
        display: block;
      }
      .tree-label span {
        font-size: 14px;
      }
    }
    .custom-tree-node {
      width: 100%;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
    }
    .svg {
      padding: 10px 5px;
    }
    .svg-icon {
      color: #a5a5a5;
      &-edit {
        position: relative;
        top: -2px;
        width: 14px !important;
        height: 14px !important;
      }
      &-caidan {
        font-size: 16px;
        color: #333;
        margin-bottom: 1px;
      }
      &-add {
        padding: 20px 14px;
        cursor: pointer;
        font-size: 23px;
        svg {
          color: #a5a5a5;
        }
        svg:hover {
          color: #1890ff;
        }
      }
      &.icon-fold {
        color: #606266;
        margin-right: 4px;
      }
      // margin-right:4px;
      &.eye-off {
        font-size: 16px;
      }
      &.svg-link {
        font-size: 12px;
      }
    }
    .el-icon-delete-solid {
      color: #a5a5a5;
    }
    .tree-hd {
      // padding: 0px 58px 0px 24px;
      padding: 0px 17px 0 24px;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      height: 60px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      .normal {
        color: #333;
      }
    }
  }
  .main-wrap {
    padding: 26px;
    // margin-left:350px;
    // margin-left:24%;

    background: #fff;
    border-radius: 3px;
  }
}
.content-hd .search-btn {
  width: 100px;
  font-size: 14px;
  padding: 8px;
}

.wd-120 {
  width: 120px;
}
.el-tag {
  padding: 10px;
  display: block;
  text-align: left;
  white-space: normal;
  height: auto;
  [class*="el-icon-"] {
    float: left;
    margin-top: 6px;
  }
  p {
    line-height: 20px;
  }
}
.el-select {
  width: 180px;
}
.el-input {
  width: 220px;
}
.active {
  color: #1890ff;
  .svg-icon {
    color: #1890ff !important;
  }
  .el-icon-delete-solid {
    color: #1890ff !important;
  }
}
.el-icon-plus {
  font-weight: 600;
}
.svg:focus,
svg:focus {
  // focus下有边框
  outline: none;
}
.blueText {
  cursor: pointer;
}
/deep/ .el-button {
  .el-icon-search,
  .el-icon-refresh-left {
    font-weight: bold;
  }
}
// /deep/.svg-icon{

// }

.el-scrollbar__bar.is-vertical {
  right: 0px;
}
.el-scrollbar {
  height: calc(100% - 60px);
  overflow-x: hidden !important;
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}

.radius-5 {
  border-radius: 5px !important;
}
.el-dropdown-menu__item .svg-icon {
  margin-right: 5px;
}
// @media screen and (max-width: 1600px) {
.tree-wrap .el-tree-node__content .custom-tree-node .tree-label {
  display: block;
  // width: 100px;
}
// }
// @media screen and (max-width: 1360px) {
//   .page-container .tree-wrap .tree-hd {
//     padding: 0px 22px 0px 24px;
//   }
//   .tree-wrap .el-tree {
//     padding: 10px 22px 20px 40px !important;
//   }
// }
/deep/ .wrap-hd .el-button--default {
  span {
    color: #777;
    svg {
      color: #999;
    }
  }
}
.wrap-hd .el-button--default:hover {
  color: #409eff;
}
.delete-opp-dialog {
  /deep/ .el-table.table-wrap {
    margin-top:30px;
    .has-gutter{
      display: none;
    }
    .el-table__row td:nth-of-type(1),.el-table__row td:nth-of-type(3){
      background: #F2F4F7;
      border-bottom: 1px solid #d9d9d9;
    }
  }
}
.imgdis{
  cursor: pointer;
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
}

.el-ic{
  display: none;
}
.el-tree-node__content:hover .el-ic {
  display: inline-block;
}

    .div2 {
      display: flex;
      justify-content: space-between;
      background: #bae7ff;
      font-size: 14px;
      color: #000000;
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      margin: 14px 0;
      .infoIcon2 {
        color: #1890ff;
        margin-right: 10px;
      }
    }

</style>

方法

+ 点击请求列表数据
  handleTreeNodeClick (data) {
      this.currentNode = data
      this.pageNum = 1
      this.findPage()
    },
  //
    findList () {
      this.isTreeLoading = true
      findList({ pageNum: 0, pageSize: 0 }).then(res => {
        res.data.unshift({ name: '全部', id: '' })
        this.treeData = res.data.map(item => {
          return { ...item, label: item.name }
        })
        console.log(this.treeData)
        this.isTreeLoading = false
      }).catch(_ => { this.isTreeLoading = false })
    },
+ 新建    
    addTreeNode () {
      this.handleAddliveQrCodeClass()
    },
    handleAddliveQrCodeClass () {
      this.$refs.liveQrCodeClassDialog.changeVisible()
    },
    + 编辑
 editTreeNode (data) {
      this.currentNode = data
      this.$refs.liveQrCodeClassDialog.changeVisible(data)
    },
    onEditCategory (data) {
      dqcGroupSave({ id: this.currentNode.id, name: data.name }).then(res => {
        this.$message.success('编辑成功')
        this.findList()
      })
    },
+ 删除
    removeTreeNode (data) {
      this.currentNode = data
      this.$refs.deleteCategoryDialog.changeVisible()
    },
    onRemoveCategory () {
      dqcGroupRemove({ ids: [this.currentNode.id] }).then(res => {
        this.$message.success('删除成功')
        this.$refs.deleteCategoryDialog.clickCancel()
        this.findList()
      })
    },

新建编辑组件

<liveQrCodeClassDialog ref="liveQrCodeClassDialog" @add="onAddCategory" @edit="onEditCategory" :info='currentNode' />


import liveQrCodeClassDialog from '../component/liveQrCodeClassDialog'

  components: {
    liveQrCodeClassDialog
  },

组件内容

<template>
  <el-dialog :title="type=='add'?'新建活码分类':'编辑活码分类'" :visible.sync="show" width="560px" :close-on-click-modal="false" center custom-class="xx-dialog-box" @close="clickCancel">
    <div class="">
    <el-form :model="form" ref="form" class="mt-20" label-width="120px">
      <el-form-item label="活码分组名称：" prop="name" :rules="[ { required: true, message: '请填写活码分组名称'}]">
        <el-input placeholder="填写活码分组名称" v-model.trim="form.name" size="medium" style="width:100%" maxlength="12"></el-input>
      </el-form-item>
    </el-form>
    </div>
    <div slot="footer">
      <el-button size="medium" @click="clickCancel">取消</el-button>
      <el-button size="medium" type="primary" @click="clickSure('form')">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      type: 'add',
      form: {
        name: ''
      }
    }
  },
  methods: {
    changeVisible (form) {
      this.show = true
      if (form) {
        this.form = { name: form.name }
        this.type = 'edit'
      } else {
        this.$refs.form.resetFields()
        this.form = { name: '' }
        this.type = 'add'
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    clickCancel () {
      this.show = false
      this.resetForm('form')
    },
    clickSure (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.type === 'add') {
            this.$emit('add', this.form)
          } else {
            this.$emit('edit', { ...this.info, name: this.form.name })
          }
          this.show = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tag{
  padding:10px;
  display: block;
  text-align:left;
  white-space: normal;
  height:auto;
  [class^="el-icon-"]{
    float: left;
    margin-top: 6px;
  }
  p{line-height: 20px;}
}
</style>

补充点击确定按钮的一个防抖函数


// 防抖函数
function debounce (func, wait = 200) {
  let timeout
  return function (event) {
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.call(this, event)
    }, wait)
  }
}


clickSure: debounce(function (e) {
    this.$emit('sure')
  }, 400),