el-table动态生成合并表头,并且过滤值

最新推荐文章于 2024-09-05 11:20:10 发布

神探小白牙

最新推荐文章于 2024-09-05 11:20:10 发布

阅读量538

点赞数

分类专栏： element 文章标签： elementui

本文链接：https://blog.csdn.net/anny_mei/article/details/125485721

版权

element 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

项目情况是表格和表头都是动态的,值也需要过滤

效果图
在这里插入图片描述
表格代码

      <div class="datalist">
        <el-table
          ref="crud"
          class="check-all-hide"
          :data="recordList"
          border
          @selection-change="selectionChange"
          @row-click="handleRowClick"
          style="width: 100%"
          :max-height="mainHeight - 300"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column
            align="center"
            v-for="(col, index) in headerdsList"
            :label="col.label"
            :key="index"
            :prop="col.prop"
          >
            <div v-if="col.propsChildren">
              <el-table-column
                align="center"
                v-for="(child, childIndex) in col.propsChildren"
                :label="child.label"
                :key="childIndex"
                :prop="child.prop"
              >
                <template slot-scope="scope">
                  <span
                    :style="{
                      color: scope.row[`up-${child.prop}`]
                        ? 'red'
                        : scope.row[`down-${child.prop}`]
                        ? 'orange'
                        : '',
                    }"
                    >{{ scope.row[child.prop] }}
                    <i
                      class="el-icon-top"
                      v-if="scope.row[`up-${child.prop}`]" />
                    <i
                      class="el-icon-bottom"
                      v-if="scope.row[`down-${child.prop}`]"
                  /></span>
                </template>
              </el-table-column>
            </div>
          </el-table-column>
        </el-table>

表头数据结构
在这里插入图片描述
列表接口

重点在于,表头的prop和列表的key值得一一匹配