el-tree结合el-table，树形添加修改操作

效果图

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"
          >新增事业群</el-button
        >
      </div>
      <!-- <div slot="searchCon">
        <el-button @click="searchBtn" icon="el-icon-search" type="primary" size="small"></el-button>
      </div> -->
      <!-- 搜索条件 -->
      <div slot="searchBox">资产类型管理</div>
      <!-- 表格部分 -->
      <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="输入关键字进行过滤"
                    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="序号" width="120"
                    ><template slot-scope="scope">
                      <span>{
    {
     (page - 1) * limit + scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="事业群名" width="260">
                  </el-table-column>
                  <el-table-column prop="pid_name" label="上级事业群">
                  </el-table-column>
                  <el-table-column prop="remark" label="备注">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" 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">修改</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>
    <!-- 新增分类 -->
    <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="事业群名称：" prop="name">
          <el-input
            v-model="groupForm.name"
            placeholder="请输入事业群名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级事业群：" prop="pid">
          <!-- <el-select v-model="groupForm.pid" placeholder="请选择上级事业群" 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="请选择事业群"
            :show-all-levels="false"
            :options="groupList"
            :props="{ checkStrictly: true, emitPath: false }"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            v-model="groupForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGroupSubmit" v-if="!isChange"
          >确 定</el-button
        >
        <el-button type="primary" @click="editSubmit" v-if="isChange"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增子事业群 -->
    <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="事业群名称：" prop="name">
          <el-input
            v-model="addChildForm.name"
            placeholder="请输入事业群名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级事业群：" prop="pid">
          <!-- <el-select v-model="groupForm.pid" placeholder="请选择上级事业群" 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="请选择上级事业群"
            :show-all-levels="false"
            :options="groupList"
            :props="{ checkStrictly: true, emitPath: false }"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input
            v-model="addChildForm.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddChildFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addChildGroupSubmit"
          v-if="!isChangeChild"
          >确 定</el-button
        >
        <el-button type="primary" @click="editChildSubmit" v-if="isChangeChild"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>

左边树样式

/* 树形结构样式 */
.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;
}

核心js代码

搜索

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

左边树里的操作

//新增子事业群
    append(store, node, data) {
    
      // console.log(store,'store')
      // console.log(node,'node')
      // console.log(data,'data')
      console.log(data, "新增子事业群");
      this.titleChild = "新增子事业群";
      this.isChangeChild = false;
      this.addChildForm.pid = data.value;
      // this.addChildForm.parent_id = data.id;
      this.dialogAddChildFormVisible = true;
    },
    //编辑子事业群
    nodeEdit(store, node, data) {
    
      console.log(data, "修改事业群");
      // this.editMainId = data;
      this.addChildForm = {
    };
      this.title = "修改事业群";
      this.groupDialogVisible = true;
      this.isChange = true;
      getGroupInfo({
     group_id: data.value }).then((res) => {
    
        console.log(res, "详情数据");

        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 = "修改子事业群";
      // this.isChangeChild = true;
      // this.dialogAddChildFormVisible = true;
    },
    // 左侧树形结构操作
    // 结构树操作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的')
      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>
      );
    },