el-table实现部分表格列动态展示

最新推荐文章于 2024-06-04 12:00:19 发布

BBH2000

最新推荐文章于 2024-06-04 12:00:19 发布

阅读量787

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.youkuaiyun.com/BBH2000/article/details/132037900

本文介绍了如何在Vue的ElementUI中使用el-table实现部分表格列的动态展示，包括数据绑定、列配置和使用列模板处理复杂内容

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table实现部分表格列动态展示

 <el-table v-loading="loading" :data="floorAreaPlanList" @selection-change="handleSelectionChange"
                    ref="singleTable"
                    :header-cell-style="{ fontSize: '14px', height: '48px', padding: '0px', background: 'white', }"
                    :row-style="{ height: 56 + 'px' }" height="100%" @sort-change="sortChange">
                    <template slot="empty">
                        <h-empty v-if="isEmpty(floorAreaPlanList)" type="table" />
                    </template>
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" align="center" width="70px" fixed="left">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="安全区" placement="top-start">
                                <i v-if="scope.row.plan.isSafety === 1" class="el-icon-warning-outline" style="font-size:14px;float: left;line-height: 23px;"></i> 
                            </el-tooltip>
                            {{  queryParams.pageSize * (queryParams.pageNum - 1) + (scope.$index + 1)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="VIN" align="left" prop="plan.vinCode" fixed="left" width="170px" sortable
                        :show-overflow-tooltip="true" />
                    <el-table-column label="计划订单号" align="left" prop="plan.planOrderNo" fixed="left" width="120px"
                        :show-overflow-tooltip="true" sortable />
                    <el-table-column label="车型" align="left" prop="plan.modelCode" fixed="left" width="120px" sortable
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div v-for="(item, index) in weldingCartypeList" :key="index">
                                <span v-if="scope.row.plan.modelCode == item.itemValue">{{ item.itemKey }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="计划下发类型" align="left" prop="plan.momType" fixed="left" width="130px" sortable
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div v-for="(item, index) in orderTypeList" :key="index">
                                <span v-if="scope.row.plan.momType == item.itemValue">{{ item.itemKey }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="计划状态" align="left" prop="plan.planStatus" fixed="left" width="130px" sortable
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div v-for="(item, index) in planStatusList" :key="index">
                                <span v-if="scope.row.plan.planStatus == item.code">{{ item.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="计划规则描述" align="left" prop="plan.planTypeName" fixed="left" width="130px"
                        :show-overflow-tooltip="true" sortable />
                    <el-table-column label="计划开始时间" align="left" prop="plan.planDate" fixed="left" width="130px" sortable
                        :show-overflow-tooltip="true" />
                    <el-table-column label="拉出原因" align="left" prop="plan.bypassReason" width="100px" sortable
                        :show-overflow-tooltip="true" />
                    <el-table-column label="主线拉出位置" align="left" prop="plan.bypassLocation" width="130px" sortable
                        :show-overflow-tooltip="true" />
                    <el-table-column v-for="(item, index) in tableLabel" :key="index" :label="item.workStationName"
                        width="160px">
                        <template slot-scope="scope">
                            <div v-for="(item1, index) in  scope.row.tasks ">
                                <span v-if="item.workStationCode == item1.stationCode">
                                    <span v-for=" item2 in taskStatusList">
                                        <span v-if="item2.code == item1.status">
                                            {{ item2.name }}
                                        </span>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right" width="200px"
                        class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <h-button type="text" icon="hv-edit" @click="handelUpdate(scope.row)">修改
                            </h-button>
                            <h-button type="text" class="delete_button" style="color: #f56c6c"
                                @click="handleDetail(scope.row)">详情
                            </h-button>
                        </template>
                    </el-table-column>
                </el-table>

数据格式

在这里插入图片描述

JS代码

后端返回的数据为所显示数据的编码，所以需要重新匹配，使用了cloneDeep，

import { isEmpty, cloneDeep } from "lodash";

      //地板区域管理计划列表
        async getFloorAreaPlanList() {
            this.loading = true
            listFloorArea(this.queryParams).then((res) => {
                this.floorAreaPlanList = res.rows
                this.total = res.total
                this.loading = false
            })
            //获取工位列表
            await listWorkStation().then((res) => {
                this.workStationList = res
            })
            await this.$nextTick(() => {
                this.tableLabel = cloneDeep(this.workStationList)

            })
            this.$nextTick(() => {
                this.$refs.singleTable.doLayout();
            });
        },