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

原创

已于 2022-07-19 10:56:48 修改 · 2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-07-04 13:45:45 首次发布

本文介绍了如何在Vue.js应用中结合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

最低0.47元/天解锁文章