表格动态列展示

最新推荐文章于 2024-08-14 15:45:18 发布

dy1717

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量84

点赞数 1

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dy1717/article/details/139529734

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求：动态列数据展示

<el-table
                ref="table"
                :data="tableData"
                :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
                style="width: 100%; margin: 0 auto"
                height="100%"
                align="center"
                stripe
                row-key="id"
                border
                :row-class-name="tableRowClassName"
                @sort-change="sortChange"
                @cell-click="tabClick"
                @header-dragend="
                  () => {
                    $nextTick(() => {
                      this.$refs.table && this.$refs.table.doLayout() // 解决表格错位
                    })
                  }
                "
              >
                <el-table-column
                  v-for="(item, index) in viewColumns"
                  :key="index"
                  :fixed="item.fixed"
                  :prop="item.prop"
                  :align="item.align"
                  :label="item.label"
                  :min-width="item.width"
                  sortable="custom"
                  :show-overflow-tooltip="true"
                />
              </el-table>

 async getTabelData(data) {
      const params = {
        pageindex: this.page,
        pagesize: this.pageSize,
        sortfield: '',
        sorttype: 'asc',
      }
      const res = await datalistDetail(params)
      if (res && res.rows && res.rows.length > 0) {
//modelCount是后端返回的每一个列里面的动态数据
        if (String(this.page) === '1' && (JSON.stringify(res.rows[0].modelCount) !== '{}' || res.rows.modelCount !== undefined)) {
          this.oneList = JSON.parse(JSON.stringify(res.rows[0].modelCount)) // 获取静态列的数据
        }
        // 判断静态列有没有
        if (this.oneList) {
          let inSertColums = []
//viewColumnsOne 这个数据是静态的
          this.viewColumnsOne = [ 
            { prop: 'mishiDay', width: '120', align: 'left', label: '静态数据1', fixed: false },
            { prop: 'endWeek', width: '120', align: 'left', label: '静态数据2', fixed: false }
          ]
          for (const property in this.oneList) {
            inSertColums = [...inSertColums, { prop: property, width: '120', align: 'left', label: property, fixed: false }]
            res.rows.map((item) => {
              item[property] = item.modelCount[property]
            })
          }
          inSertColums.map((item, index) => {
            this.viewColumnsOne.splice(Number(14), 0, item)
          })
          const obj = {}
          this.viewColumns = this.viewColumnsOne.reduce((prev, cur) => {
            obj[cur.prop] ? '' : (obj[cur.prop] = true && prev.push(cur))
            return prev
          }, []) //动态数据拼接
          this.tableData = res.rows
          this.total = res.rowcount
        }
      } else {
        this.viewColumns = this.viewColumnsOne
        this.tableData = []
        this.total = 0
      }
      // datalistDetail(params).then((res) => {
      //   this.viewColumnsEnd = []
      //   this.tableData = res.rows || []
      //   this.total = res.rowcount || 0
      // })
      // .finally(() => {
      //   this.$nextTick(() => {
      //     this.$refs.table && this.$refs.table.doLayout() // 解决表格错位
      //   })
      // })
    },