El tree combined with El table, tree adding and modifying operations

design sketch

html

  <div class="container">
    <my-crumbs :crumbs="crumbs"></my-crumbs>
    <contentArea ref="contentBox">
      <div slot="btnCon">
        <el-button
          size="small"
          icon="el-icon-plus"
          type="primary"
          @click="addGroup"
          > New business group </el-button
        >
      </div>
      <!-- <div slot="searchCon">
        <el-button @click="searchBtn" icon="el-icon-search" type="primary" size="small"></el-button>
      </div> -->
      <!--  search criteria  -->
      <div slot="searchBox"> Asset type management </div>
      <!--  The form section  -->
      <div slot="tableCon">
        <el-row :gutter="24">
          <el-col :xs="24" :sm="24" :md="6">
            <div class="tree_box">
              <el-card>
                <div class="searchLeft">
                  <el-input
                    placeholder=" Enter keywords to filter "
                    v-model="filterText"
                  >
                  </el-input>
                </div>
                <el-tree
                  class="tree-line"
                  :data="treeData"
                  :props="defaultProps"
                  default-expand-all
                  :key="tree_key"
                  node-key="id"
                  :render-content="renderContent"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  @node-click="changeNodeTree"
                  ref="tree"
                >
                </el-tree>
              </el-card>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="18">
            <div class="table_box">
              <el-card>
                <el-table
                  :data="tableData"
                  ref="multipleTable"
                  style="width: 100%"
                  height="600"
                  v-loading="loading"
                >
                  <el-table-column type="index" label=" Serial number " width="120"
                    ><template slot-scope="scope">
                      <span>{
    {
     (page - 1) * limit + scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label=" Business group name " width="260">
                  </el-table-column>
                  <el-table-column prop="pid_name" label=" Superior business group ">
                  </el-table-column>
                  <el-table-column prop="remark" label=" remarks ">
                  </el-table-column>
                  <el-table-column fixed="right" label=" operation " align="center">
                    <template slot-scope="scope">
                      <el-button
                        @click="change(scope.row)"
                        type="text"
                        size="medium"
                        style="color: #f8ac59"
                        ><div class="editBtn">
                          <div class="icon">
                            <img src="../../assets/icon/change.png" alt="" />
                          </div>
                          <div class="text charge"> modify </div>
                        </div></el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <div class="page_box">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </contentArea>
    <!--  New category  -->
    <el-dialog
      :title="title"
      :visible.sync="groupDialogVisible"
      width="40%"
      @close="groupClose"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addGroupForm"
        :label-position="labelPosition"
        :rules="groupRules"
        label-width="120px"
        :model="groupForm"
      >
        <el-form-item label=" Business group name ：" prop="name">
          <el-input
            v-model="groupForm.name"
            placeholder=" Please enter the business group name "
          ></el-input>
        </el-form-item>
        <el-form-item label=" Superior business group ：" prop="pid">
          <!-- <el-select v-model="groupForm.pid" placeholder=" Please select the superior business group " style="width:100%" clearable>
                <el-option
                  v-for="item in groupListNoTree"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
          <el-cascader
            v-model="groupForm.pid"
            filterable
            placeholder=" Please choose a business group "
            :show-all-levels="false"
            :options="groupList"
            :props="{ checkStrictly: true, emitPath: false }"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label=" remarks ：" prop="remark">
          <el-input
            v-model="groupForm.remark"
            placeholder=" Please enter comments "
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false"> take   eliminate </el-button>
        <el-button type="primary" @click="addGroupSubmit" v-if="!isChange"
          > indeed   set </el-button
        >
        <el-button type="primary" @click="editSubmit" v-if="isChange"
          > indeed   set </el-button
        >
      </span>
    </el-dialog>
    <!--  New sub business groups  -->
    <el-dialog
      :title="titleChild"
      :visible.sync="dialogAddChildFormVisible"
      width="40%"
      @close="closeChild"
    >
      <el-form
        :model="addChildForm"
        ref="addChildForm"
        label-width="120px"
        :rules="groupRules"
        :label-position="labelPosition"
      >
        <el-form-item label=" Business group name ：" prop="name">
          <el-input
            v-model="addChildForm.name"
            placeholder=" Please enter the business group name "
          ></el-input>
        </el-form-item>
        <el-form-item label=" Superior business group ：" prop="pid">
          <!-- <el-select v-model="groupForm.pid" placeholder=" Please select the superior business group " style="width:100%" clearable>
                <el-option
                  v-for="item in groupListNoTree"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
          <el-cascader
            v-model="addChildForm.pid"
            filterable
            placeholder=" Please select the superior business group "
            :show-all-levels="false"
            :options="groupList"
            :props="{ checkStrictly: true, emitPath: false }"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label=" remarks ：" prop="remark">
          <el-input
            v-model="addChildForm.remark"
            placeholder=" Please enter comments "
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddChildFormVisible = false"> take   eliminate </el-button>
        <el-button
          type="primary"
          @click="addChildGroupSubmit"
          v-if="!isChangeChild"
          > indeed   set </el-button
        >
        <el-button type="primary" @click="editChildSubmit" v-if="isChangeChild"
          > indeed   set </el-button
        >
      </span>
    </el-dialog>
  </div>

Left tree style

/*  Tree structure style  */
.el-tree /deep/ .node_box {
    
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 2px 0;
  overflow: hidden;
  font-size: 13px;
}
.el-tree /deep/ .tree_node_op {
    
  float: left;
  margin-left: 60px;
  display: none;
}
.el-tree /deep/ .node_box:hover .tree_node_op {
    
  color: #ce1e1b;
  display: block;
}
.el-tree /deep/ .node_box:hover .tree_node_op > i {
    
  margin-right: 4px;
}
.el-tree /deep/ .node_box:hover .el-icon-document {
    
  color: #ce1e1b;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content .tree_node_op {
    
  /* display: none; */
}
.tree-line {
    
  height: 500px;
  overflow: scroll;
}
.el-table__fixed-right-patch {
    
  background-color: white !important;
}

The core js Code

Search for

  watch: {
    
    filterText(val) {
    
      this.$refs.tree.filter(val);
    },
  },

Operations in the tree on the left

// New sub business groups 
    append(store, node, data) {
    
      // console.log(store,'store')
      // console.log(node,'node')
      // console.log(data,'data')
      console.log(data, " New sub business groups ");
      this.titleChild = " New sub business groups ";
      this.isChangeChild = false;
      this.addChildForm.pid = data.value;
      // this.addChildForm.parent_id = data.id;
      this.dialogAddChildFormVisible = true;
    },
    // Edit sub business group 
    nodeEdit(store, node, data) {
    
      console.log(data, " Modify the business group ");
      // this.editMainId = data;
      this.addChildForm = {
    };
      this.title = " Modify the business group ";
      this.groupDialogVisible = true;
      this.isChange = true;
      getGroupInfo({
     group_id: data.value }).then((res) => {
    
        console.log(res, " Details ");

        this.groupForm.name = res.data.name;
        this.groupForm.pid = res.data.pid;
        this.groupForm.group_id = res.data.id;
        this.groupForm.remark = res.data.remark;
      });
      // this.editForm.code=this.editMainId.code
      // this.titleChild = " Modify the sub business group ";
      // this.isChangeChild = true;
      // this.dialogAddChildFormVisible = true;
    },
    //  Left tree structure operation 
    //  Structure tree operation group node,
    showOrEdit(data) {
    
      if (data.isEdit) {
    
        return (
          <input
            type="text"
            value={
    data.label}
            on-blur={
    (ev) => this.edit_sure(ev, data)}
          />
        );
      } else {
    
        return <span className="node_labe">{
    data.label}</span>;
      }
    },
    changeNodeTree(e, node) {
    
      console.log(e, "eee");
      console.log(node, "node");
      this.formInline.group_id = e.value;
      // if (this.searchData.parent_id == undefined) {
    
      // this.searchData.parent_id = "";
      // }
      // if (Array.isArray(node.parent.data) == true) {
    
      // this.searchData.type_id = "";
      // this.searchData.parent_id = e.id;
      // } else {
    
      // this.searchData.type_id = e.id;
      // this.searchData.parent_id = node.parent.data.id;
      // }
      this.getList();
    },
    filterNode(value, data) {
    
      // console.log(value,'filterNode Of ')
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    renderContent(h, {
      node, data, store }) {
    
      return (
        <span class="node_box">
          <span class="el-icon-document">{
    this.showOrEdit(data)}</span>
          <div class="tree_node_op" style=" float: right;margin-left:60px;">
            <i
              class="el-icon-edit"
              on-click={
    (ev) => this.nodeEdit(ev, store, data)}
            ></i>
            <i
              class="el-icon-plus"
              on-click={
    () => this.append(store, node, data)}
            ></i>
          </div>
        </span>
      );
    },