【elementUI】el-table表格相关问题及解决方法

SZnA1

已于 2025-04-11 15:16:38 修改

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VUE 疑难记录 elementUI 文章标签： javascript 前端 elementui vue.js

于 2022-09-28 15:48:56 首次发布

本文链接：https://blog.csdn.net/liusuihong919520/article/details/127068284

疑难记录同时被 3 个专栏收录

55 篇文章

订阅专栏

VUE

34 篇文章

订阅专栏

elementUI

17 篇文章

订阅专栏

本文分享了ElementUI表格组件的常见问题解决方案，包括解决显示隐藏后边框bug、添加单列或多列排序功能、修复表格列错位、指定字段单元格样式与数据格式化、重置表头排序及实现默认全选等。

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

1.切换显示隐藏后边框bug

elementUI table表格组件

页面内有多个table表格，使用v-if进行切换显示隐藏后。如果存在多个表格的话，某个表格有边框，在切换显示隐藏后可能会把上次切换的框线带过来

解决方法：

在不需要框线的表格外套一层div，自定义class类名。

添加css样式

.tableLineNone >>> .el-table__row > td {

/* 去除表格边框线 */

border: none;

}

table外套一层div：

			<div class="tableLineNone">
				<el-table
					ref="doLayout"
					v-adaptive="{ bottomOffset: 85 }"
					height="100px"
					v-loading="loading"
				>
					<template v-for="(item, index) in columns">
						<el-table-column
							:key="index"
							:index="index"
							:label="item.label"
							align="center"
							:width="item.width"
							:prop="item.prop"
							:show-overflow-tooltip="true"
						>
							<template slot-scope="scope">
								<template v-if="item.render">
									<span>
										<RenderDom
											:row="scope.row"
											:index="index"
											:render="item.render"
										/>
									</span>
								</template>
								<template v-else>
									<span>{{ scope.row[item.prop] }}</span>
								</template>
							</template>
						</el-table-column>
					</template>
				</el-table>
			</div>

添加css样式：

.tableLineNone >>> .el-table__row > td {
	/* 去除表格边框线 */
	border: none;
}

即可解决

2.elementUI表格给列表单独某一列增加排序功能

1)单列排序

      <el-table v-loading="loading" :data="dataList">
        <template v-for="(item, index) in columns">
          <el-table-column
            :key="index"
            :index="index"
            :label="item.label"
            align="center"
            :prop="item.prop"
            :show-overflow-tooltip="true"
            :sortable="item.code == 'updatedTime' ? true : false"//这里
          >
            <template slot-scope="scope">
              <template v-if="item.render">
                <span>
                  <RenderDom
                    :row="scope.row"
                    :index="index"
                    :render="item.render"
                  />
                </span>
              </template>
              <template v-else>
                <span>{{ scope.row[item.code] }}</span>
              </template>
            </template>
          </el-table-column>
        </template>

:sortable="item.code == 'updatedTime' ? true : false"

2.多列添加排序

      <el-table v-loading="loading" :data="dataList">
        <template v-for="(item, index) in columns">
          <el-table-column
            :key="index"
            :index="index"
            :label="item.label"
            align="center"
            :prop="item.prop"
            :show-overflow-tooltip="true"
            :sortable="item.sortable"//这里
          >
            <template slot-scope="scope">
              <template v-if="item.render">
                <span>
                  <RenderDom
                    :row="scope.row"
                    :index="index"
                    :render="item.render"
                  />
                </span>
              </template>
              <template v-else>
                <span>{{ scope.row[item.code] }}</span>
              </template>
            </template>
          </el-table-column>
        </template>

data(){
    return{
    columns:[
            				{
					label:'编号',
					code: `id`,
					visible: true,
					sortable: true,
				},
				{
					label: '时间',
					code: `time`,
					visible: true,
                    sortable: true,
				},    
]
}

3.表格使用fixed 切换页面后列错位

方式一：去除设置的定高

			<el-table
				v-adaptive="{ bottomOffset: 85 }"
				height="100px" //去除定高
				v-loading="loading"
				:data="dataList"
				ref="doLayout"
			>

方式二：ref

表格在进行页面切换后出现错位或者多余边线等情况时

1.给表格添加ref

<el-table
				height="400px"
				:data="dataList"
				ref="tableref"//添加ref
			>

2.找到页面切换时的变量，watch里监听，或使用activated，或在接口调用的时候调用doLayout

	watch: {
		showPage: {
			handler(oldVal, newVal) {
				if (oldVal != newVal) {
					this.$nextTick(() => {
						this.$refs.tableref.doLayout();
					});
				}
			},
			deep: true,
		},
	},

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

    getList() {
      this.dataList = [];
      getData(param).then((response) => {
        if (response.code == 200) {
          this.dataList = response.rows;
          this.doLayout();
        }
      });
    },

方式三(全局解决):mixins

1.在src/mixins/ 目录下新建elementTableMixin.js

export default {
	// 切换页面后 表格 固定列 列错位
	mounted() {
		this.$nextTick(() => {
			this.$refs.table.$watch(
				'bodyWidth',
				() => {
					this.$refs.table.doLayout();
				},
				{ immediate: true }
			);
		});
	},
};

//或者使用
export default {
	// 切换页面后 表格 固定列 列错位
	mounted() {
		this.$nextTick(() => {
			this.$refs.table.$watch(
				'bodyWidth',
				() => {
					this.$refs.table.doLayout();
					this.$refs.table.height = '500px';
				},
				{ immediate: true }
			);
			this.$refs.table.doLayout();
		});
	},
    //滑动列表后切换每页显示数后 列错位
	updated() {
		this.$nextTick(() => {
			this.$refs.table.bodyWrapper.scrollTop = 0;
		});
	},
};

2.在要使用的vue页面中给el-table添加ref

<el-table
				ref="table"
				height="500px"
				:data="dataList"
			>

错位页面使用

import tableMixin from '@/mixins/elementTableMixin'; //引用


export default {
	name: 'pageName',
	mixins: [tableMixin],//使用
}

4.Table指定字段单元格样式及数据格式化

将列表中的指定字段的数据，根据字典值回显，并修改指定状态的显示样式

	<el-table
				ref="table"
				height="500px"
				:data="dataList"
			>
				<template v-for="(item, index) in columns">
					<el-table-column
						:key="index"
						:index="index"
						:label="item.label"
						align="center"
						:prop="item.code"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<template v-if="item.render">
								<span>
									<RenderDom
										:row="scope.row"
										:index="index"
										:render="item.render"
									/>
								</span>
							</template>

							<template v-else-if="item.code === 'deviceCount'">
								<span
									v-if="
										scope.row[item.code] === null || scope.row[item.code] === ''
									"
									>-</span
								>
								<button
									v-else
									class="deviceCountBtn"
									@click="handleDeviceCountBtn(scope.row)"
								>
									{{ scope.row[item.code] }}
								</button>
							</template>

							<template v-else-if="item.code === 'status'">
								<div class="statusFlex">
									<div
										:class="[
											'statusCircle',
											{ statusCirclePurple: scope.row[item.code] === '2' },
											{
												statusCircleGray:
													scope.row[item.code] === '1' ||
													scope.row[item.code] === '3' ||
													scope.row[item.code] === '4',
											},
										]"
									></div>
									<span>{{
										selectDictLabel(
											dict.type.paas_orderStatus,
											scope.row[item.code]
										)
									}}</span>
								</div>
							</template>
							<template v-else>
								<span>{{ scope.row[item.code] }}</span>
							</template>
						</template>
					</el-table-column>
				</template>
</el-table>

// 列信息
			columns: [
				{
					label: this.$t('paasOrder.status'),
					code: `status`,
					visible: true,
					width: '250px',
				},
				{
					label: this.$t('common.updatedBy'),
					code: `updatedBy`,
					visible: true,
					width: '220px',
				},
				{
					label: this.$t('common.updatedTime'),
					code: `updatedTime`,
					visible: true,
					width: '220px',
				},
			],

	// 清除圆形下默认'-'
	.statusCircle::after {
		content: '';
	}
	.statusFlex {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.statusCircleGray {
		width: 13px;
		height: 13px;
		border-radius: 13px;
		background: #d8d8d8;
		margin-right: 6px;
	}
	.statusCirclePurple {
		width: 13px;
		height: 13px;
		border-radius: 13px;
		background: #4d5aa0;
		margin-right: 6px;
	}

5.点击按钮后重置表头排序（如：点击重置搜索按钮后，去除排序）

//添加ref
<el-table
	:data="listData"
	height="500px"
	ref="listTable"
>
</el-table>


//重置排序
this.$refs.listTable.clearSort();

6.列表有复选框时默认全选

//添加ref
<el-table
	:data="listData"
	height="500px"
	ref="listTable"
>
</el-table>


//表格数据获取到后执行全选方法
this.$refs.listTable.toggleAllSelection();

7.列表中嵌套el-form-item后，列表行高变高

//给el-form-item添加flex即可
	.elFormItem{
		margin-bottom: 0px !important;
		display: flex !important;
		.el-form-item__content {
			display: flex !important;
		}
	}

8.列表label添加tooltip/符号

<el-table
				:data="dataList"
				@selection-change="handleSelectionChange"
				height="500px"
				header-row-class-name="header"
				row-class-name="row"
			>
				<template>
					<el-table-column
						v-for="(item, index) in columns"
						:key="index"
						:index="index"
						:label="item.label"
						align="center"
						min-width="155"
						:prop="item.code"
						:show-overflow-tooltip="true"
					>
                    <!-- label配置 -->
						<template slot="header" slot-scope="scope">
							<span
								>{{ item.label }}
								<el-tooltip
									class="item"
									effect="dark"
									content="车辆编号为非必填项，调拨后可在目标门店重新编辑"
									placement="top"
									v-if="
										item.code === 'matchCartNum' &&
										isShowPage === 'batchExchange'
									"
								>
									<svg-icon
										style="width: 13px; height: 13px"
										icon-class="questionIcon"
									/> </el-tooltip
							></span>
						</template>
                    <!-- label配置 -->

						<template slot-scope="scope">
							<template v-if="item.render">
								<span>
									<RenderDom
										:row="scope.row"
										:index="index"
										:render="item.render"
									/>
								</span>
							</template>

							<template v-else>
								<span>{{ scope.row[item.code] }}</span>
							</template>
						</template>
					</el-table-column>
				</template>
			</el-table>