Element 表格嵌套el-popover 多个popover切换时数据动态变化

最新推荐文章于 2024-11-13 11:16:44 发布

Windyluna

最新推荐文章于 2024-11-13 11:16:44 发布

阅读量3.2k

点赞数 2

分类专栏： Vue Element 文章标签：前端

本文链接：https://blog.csdn.net/Windyluna/article/details/120273429

版权

Vue 同时被 2 个专栏收录

24 篇文章 4 订阅

订阅专栏

Element

6 篇文章 0 订阅

订阅专栏

要点：
（1）点击时触发 popover
trigger="click"
（2）展示 / 隐藏 popover
@show="contentDetail(scope.row, scope.$index)"
@hide="hidePopover(scope.row, scope.$index)"
（3）切换 popover 时，在请求新数据时先要清空一下数据
this.spanArr = []
this.position = 0
this.planList = []
（4）根据数据动态合并单元格
原理如：https://blog.csdn.net/qq_29468573/article/details/80742646
（5）其他bug参考：
① element中table布局（fixed）以及动态布局造成的列表错乱：
https://blog.csdn.net/beichen3997/article/details/103721608
② element-ui 里 el-popover 位置发生偏移：
https://www.icode9.com/content-4-791761.html

效果图：
在这里插入图片描述
代码实现：

<div class="public_table">
  <el-table :data="pageInfo.rows" style="width: 100%" ref="multipleTable">
    <el-table-column type="index" label="序号" min-width="5.88%"></el-table-column>
    <el-table-column prop="stationName" label="名称" min-width="23.53%" show-overflow-tooltip></el-table-column>
    <el-table-column prop="cityName" label="城市" min-width="8.24%"></el-table-column>
    <el-table-column prop="companyName" label="公司" min-width="21.18%" show-overflow-tooltip></el-table-column>

    <el-table-column label="已完成" min-width="11.76%">
      <template slot-scope="scope">
        <el-popover @show="contentDetail(scope.row, scope.$index)" @hide="hidePopover(scope.row, scope.$index)" width="580" trigger="click">
          <div class="public_table">
            <el-table :data="planList" style="width: 100%" :ref="`complete-popover-${scope.$index}`" :show-header="false" border :span-method="objectSpanMethod">
              <el-table-column prop="period" label="周期" min-width="11.11%"></el-table-column>
              <el-table-column prop="name" label="个站名称" min-width="59.26%" show-overflow-tooltip></el-table-column>
              <el-table-column label="时间" min-width="14.81%">
                <template slot-scope="scope">
                  <span style="color: #3ab236">{{ scope.row.time }}</span>
                </template>
              </el-table-column>
              <el-table-column label="负责人" min-width="14.81%" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span style="color: #3ab236">{{ scope.row.person }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button class="complete_button" slot="reference" type="text" size="medium">{{ scope.row.complete }}个</el-button>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="待处理" min-width="11.76%">
      <template slot-scope="scope">
        <el-popover @show="contentDetail(scope.row, scope.$index)" @hide="hidePopover(scope.row, scope.$index)" width="580" trigger="click">
          <div class="public_table">
            <el-table :data="planList" style="width: 100%" :ref="`allocate-popover-${scope.$index}`" :show-header="false" border :span-method="objectSpanMethod">
              <el-table-column prop="period" label="运维周期" min-width="11.11%"></el-table-column>
              <el-table-column prop="name" label="个站名称" min-width="59.26%" show-overflow-tooltip></el-table-column>
              <el-table-column label="时间" min-width="14.81%">
                <template slot-scope="scope">
                  <span style="color: #3ab236">{{ scope.row.time }}</span>
                </template>
              </el-table-column>
              <el-table-column label="负责人" min-width="14.81%" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span style="color: #3ab236">{{ scope.row.person }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button class="allocate_button" slot="reference" type="text" size="medium">{{ scope.row.allocate }}个</el-button>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="待分配" min-width="11.76%">
      <template slot-scope="scope">
        <el-popover @show="contentDetail(scope.row, scope.$index)" @hide="hidePopover(scope.row, scope.$index)" width="580" trigger="click">
          <div class="public_table">
            <el-table :data="planList" style="width: 100%" :ref="`notAllocate-popover-${scope.$index}`" :show-header="false" border :span-method="objectSpanMethod">
              <el-table-column prop="period" label="运维周期" min-width="11.11%"></el-table-column>
              <el-table-column prop="name" label="个站名称" min-width="59.26%" show-overflow-tooltip></el-table-column>
              <el-table-column label="时间" min-width="14.81%">
                <template slot-scope="scope">
                  <span style="color: #3ab236">{{ scope.row.time }}</span>
                </template>
              </el-table-column>
              <el-table-column label="负责人" min-width="14.81%" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span style="color: #3ab236">{{ scope.row.person }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button class="notAllocate_button" slot="reference" type="text" size="medium">{{ scope.row.notAllocate }}个</el-button>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="操作" min-width="5.88%">
      <template slot-scope="scope">
        <el-button class="text_button" @click.native.stop="handlEdit(scope.row)" type="text" size="medium">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <BasePagination :total="pageInfo.total" @pageChange="pageChange" @sizeChange="sizeChange" class="margin-top-15" />
</div>

data 数据

data() {
  return {
    pageInfo: {
      pageNum: 1, //当前是第几页
      pageSize: 10, //当前分页大小
      total: 0,
      rows: [],
    },
    // 合并
    spanArr: [], //第一列进行合并操作时存放的数组变量
    position: 0, //上面的数组的下标值
    planList: [], //popover里的表格数据
  }
},

methods 方法里

//表格数据
init() {
  this.pageInfo.rows = [
    {
      id: 10,
      flag: false,
      stationName: '名称1',
      cityName: '广州市',
      status: '已制定',
      companyName: '广XXXXXXXX科技有限公司',
      checkItem: '20个',
      complete: 20,
      allocate: 10,
      notAllocate: 5,
    },
    {
      id: 20,
      flag: false,
      stationName: '名称2',
      cityName: '南京市',
      status: '已制定',
      companyName: '广XXXXXXXX科技有限公司',
      checkItem: '20个',
      complete: 20,
      allocate: 10,
      notAllocate: 5,
    },
    {
      id: 30,
      flag: false,
      stationName: '名称3',
      cityName: '北京市',
      status: '已制定',
      companyName: '广XXXXXXXX科技有限公司',
      checkItem: '20个',
      complete: 20,
      allocate: 10,
      notAllocate: 5,
    },
  ]
},
//第一列进行合并操作时存放的数组变量
rowspan() {
  this.planList.forEach((item, index) => {
    if (index === 0) {
      this.spanArr.push(1)
      this.position = 0
    } else {
      if (this.planList[index].period === this.planList[index - 1].period) {
        this.spanArr[this.position] += 1
        this.spanArr.push(0)
      } else {
        this.spanArr.push(1)
        this.position = index
      }
    }
  })
},
//表格合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const _row = this.spanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
},
// 展示popover
contentDetail(row, index) {
  row.flag = true
  //先清空数据
  this.spanArr = []
  this.position = 0
  this.planList = []

  //再请求数据 --- 这里可请求后台接口数据
  if (row.id === 20) {
    this.planList = [
      {
        period: 1,
        name: '状况检查1',
        time: '07/21',
        person: '宋勇1',
      },
      {
        period: 2,
        name: '状况检查3',
        time: '07/21',
        person: '宋勇3',
      },
      {
        period: 3,
        name: '状况检查8',
        time: '07/21',
        person: '宋勇8',
      },
    ]
  } else if (row.id === 10) {
    this.planList = [
      {
        period: 1,
        name: '运行状况检查1',
        time: '07/21',
        person: '宋勇1',
      },
      {
        period: 1,
        name: '运行状况检查2',
        time: '07/21',
        person: '宋勇2',
      },
      {
        period: 2,
        name: '状况检查3',
        time: '07/21',
        person: '宋勇3',
      },
      {
        period: 2,
        name: '运行状况检查4',
        time: '07/21',
        person: '宋勇1',
      },
    ]
  } else if (row.id === 30) {
    this.planList = [
      {
        period: 1,
        name: '运行状况检查5',
        time: '07/21',
        person: '宋勇1',
      },
      {
        period: 4,
        name: '运行状况检查6',
        time: '07/21',
        person: '宋勇2',
      },
      {
        period: 4,
        name: '运行状况检查7',
        time: '07/21',
        person: '宋勇3',
      },
      {
        period: 5,
        name: '运行状况检查8',
        time: '07/21',
        person: '宋勇1',
      },
    ]
  }
  //占位
  this.rowspan()
},
// 隐藏popover时
hidePopover(row, index) {
  row.flag = false
},