目录
ElementUI
表格分页(每页20条)
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" tooltip-effect="dark">
<!-- 复选框 -->
<el-table-column type="selection"> </el-table-column>
<!-- 序号 -->
<el-table-column type="index" label="序号" width="70"></el-table-column>
<!-- 名称很长显示悬浮窗 -->
<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
<!-- 自定义参数类型 -->
<el-table-column label="类型">
<template slot-scope="scope">
<div v-if="scope.row.type === 1">小程序</div>
<div v-else-if="scope.row.type === 2">后台</div>
<div v-else>全部</div>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button size="small" @click="edit(scope.row,scope.$index)" type="primary">编辑</el-button>
<el-button size="small" @click="remove(scope.row,scope.$index)" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination
background
layout="total,prev,pager,next,sizes,jumper"
:total="total"
:page-sizes="[10, 20, 30, 50]"
:page-size="pageSize"
:current-page.sync="pageNum"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
表格单元格内容过多,使用文字提示。超出一行省略号。悬浮展示所有内容。
show-overflow-tooltip
tooltip-effect="dark"
操作的时候获取当前行和当前行的下标
scope.row
scope.$index
data() {
return {
// 复选框所选中信息
selection: [],
selectStr: "",
// 表格数据
tableData: [],
// 总条数
total: 0,
// 页面条数
pageSize: 20,
// 页码
pageNum: 1,
};
},
created() {
this.getList();
},
// 获取列表数据
async getList(pageNum, pageSize) {
const res = await getIntegralRecord({
pageNum,
pageSize,
});
this.tableData = res.data.list;
this.total = res.data.total;
},
// 数量回调
handleSizeChange(e) {
this.pageSize = e;
this.getList();
},
// 页码回调
handleCurrentChange(e) {
this.pageNum = e;
this.getList();
},
// 复选框回调
handleSelectionChange(val) {
this.selection = val;
this.selectStr = val.map(function (e) {return e.id}).join(",");
},
表格分页(全部数据)
每页5条
每页10条
<el-table
v-loading="loading"
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
style="width: 100%;"
>
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="编号" align="center" prop="id" />
</el-table>
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:page-sizes="[5, 10, 20, 30, 50]"
:pager-count="5"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
data() {
return {
loading: true,
total: 0,
pageNum: 1,
pageSize: 10,
list: []
};
},
created() {
this.getList();
},
methods: {
handleSizeChange(val) {
this.pageSize = val
if (this.pageNum * val > this.total) {
this.pageNum = 1
}
this.getList()
},
handleCurrentChange(val) {
this.pageNum = val
this.getList()
},
getList() {
this.loading = true;
list({}).then(response => {
this.list = [
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
{id: 6},
{id: 7},
{id: 8},
{id: 9},
{id: 10},
{id: 11},
];
this.total = 11;
this.loading = false;
});
},
}
表格排序(全部数据)
单项排序
@sort-change="sortChange"
sortable='custom'
<el-table
v-loading="loading"
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
style="width: 100%;"
@sort-change="sortChange"
>
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="编号" align="center" prop="id" sortable='custom' />
</el-table>
data() {
return {
list: [],
};
},
created() {
this.getList();
},
methods: {
sortChange(column){
this.pageNum = 1
if(column.order === 'ascending'){ // 降序
this.list.sort(this.ascSortFun)
}else if(column.order === 'descending'){ // 升序
this.list.sort(this.desSortFun)
}else{
this.getList()
}
},
//升序
ascSortFun(a, b) {
if (a.id > b.id) return 1;
if (a.id == b.id) return 0;
if (a.id < b.id) return -1;
},
//降序
desSortFun(a,b){
if (a.id > b.id) return -1;
if (a.id == b.id) return 0;
if (a.id < b.id) return 1;
},
getList() {
this.loading = true;
list({}).then(response => {
this.list = [
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
{id: 6},
{id: 7},
{id: 8},
{id: 9},
{id: 10},
{id: 11},
];
this.total = 11;
this.loading = false;
});
},
}
多项排序
<el-table
v-loading="loading"
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
style="width: 100%;"
@sort-change="sortChange"
>
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="编号" align="center" prop="id" sortable='custom' />
<el-table-column label="时间" align="center" prop="time" sortable='custom' />
</el-table>
data() {
return {
prop: "",
list: [],
};
},
created() {
this.getList();
},
methods: {
sortChange(column){
this.pageNum = 1
this.prop = column.prop
if(column.order === 'ascending'){ // 降序
this.list.sort(this.ascSortFun)
}else if(column.order === 'descending'){ // 升序
this.list.sort(this.desSortFun)
}else{
this.getList()
}
},
//升序
ascSortFun(a, b) {
if (a[this.prop] > b[this.prop]) return 1;
if (a[this.prop] == b[this.prop]) return 0;
if (a[this.prop] < b[this.prop]) return -1;
},
//降序
desSortFun(a,b){
if (a[this.prop] > b[this.prop]) return -1;
if (a[this.prop] == b[this.prop]) return 0;
if (a[this.prop] < b[this.prop]) return 1;
},
getList() {
this.loading = true;
list({}).then(response => {
this.list = [
{id: 1,time: '11-02'},
{id: 2,time: '11-03'},
{id: 3,time: '11-05'},
{id: 4,time: '11-04'},
{id: 5,time: '11-02'},
{id: 6,time: '11-04'},
{id: 7,time: '11-03'},
{id: 8,time: '11-04'},
{id: 9,time: '11-11'},
{id: 10,time: '11-03'},
{id: 11,time: '11-01'},
];
this.total = 11;
this.loading = false;
});
},
}
表格排序(默认)
<el-table
ref="table"
v-loading="loading"
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
style="width: 100%;"
:default-sort="defaultSort"
@sort-change="sortChange"
>
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="编号" align="center" prop="id" sortable='custom' />
<el-table-column label="时间" align="center" prop="time" sortable='custom' />
</el-table>
data() {
return {
defaultSort: {prop: 'time', order: 'descending'},
list: [],
};
},
重置成默认值
reset() {
this.$refs.table.sort(this.defaultSort.prop, this.defaultSort.order)
},
两个el-table冲突
设置两个不同的key就解决问题啦
<el-table :data="tableData" key="1"></el-table>
<el-table :data="tableData2" key="2"></el-table>
加载数据前显示“ 暂无数据 ”
<el-table :data="tableData" style="width: 100%">
<template slot="empty">
<p>{{empty}}</p>
</template>
</el-table>
data: {
return: {
tableData: [],
text: ''
}
}
created() {
getTableData({}).then(res => {
if(res.code == 200) {
this.tableData = res.data
this.text = this.tableData.length > 0 ? '暂无数据' : ''
}
});
},
表格项为路由
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
<span>{{ scope.row.dictType }}</span>
</router-link>
</template>
</el-table-column>
表头样式
class和style的两种写法
<el-table
:data="tableData"
header-cell-class-name="tableStyle"
:header-cell-class-name="headerStyle"
:header-cell-style='tableHeaderStyle'
:header-cell-style="{
'background-color': '#1989fa',
'color': '#fff',
'font-weight': '400'
}"
></el-table>
headerStyle ({row, column, rowIndex, columnIndex}) {
return 'tableStyle'
},
tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
return 'background-color:#1989fa;color:#fff;font-weight:400;'
}
树形表格
<el-button @click="toggleExpandAll">展开/折叠</el-button>
<el-table
v-if="refreshTable"
:data="list"
row-key="id"
:default-expand-all="isExpandAll"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
data() {
return {
refreshTable: true,
isExpandAll: true,
list:[
{
id: 1,
name: '1',
children: [
{
id: 11,
name: '11',
children: [
{
id: 111,
name: '111',
}
]
},
{
id: 12,
name: '12',
},
]
},
{
id: 2,
name: '2',
children: [
{
id: 21,
name: '21'
},
{
id: 22,
name: '22'
},
]
}
]
};
},
展开折叠操作
toggleExpandAll() {
this.refreshTable = false;
this.isExpandAll = !this.isExpandAll;
this.$nextTick(() => {
this.refreshTable = true;
});
},
点击表格单行
row-key:行数据的Key
<el-table
ref="table"
v-loading="loading"
:data="tableData"
:row-key="getRowKey"
@row-click="clickRow"
@selection-change="handleSelectionChange"
>
</el-table>
// 单击选中行数据
clickRow(row) {
this.$refs.table.toggleRowSelection(row);
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
},
// 保存选中的数据编号
getRowKey(row) {
return row.id;
},
选中多页数据
默认情况下,
全选第一页
切换到第二页,选中的值被清空了。
<el-table v-loading="loading" :data="managerList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" fixed="left"/>
<el-table-column label="名称" align="center" prop="deviceName">
<template slot-scope="scope">名称</template>
</el-table-column>
</el-table>
handleSelectionChange(selection) {
console.log(selection)
},
提出解决方法,让第二页的数据可以选中。
<el-table v-loading="loading" :data="managerList" @selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" width="55" align="center" fixed="left" :reserve-selection="true"/>
<el-table-column label="名称" align="center" prop="deviceName">
<template slot-scope="scope">名称</template>
</el-table-column>
</el-table>
getRowKeys(row) {
return row.id
},
handleSelectionChange(selection) {
console.log(selection)
},
人数统计表(多级表头、合并行或列)
<el-table
:data="school_table"
style="width: 100%;margin-top: 20px;"
:span-method="spanMethod"
>
<el-table-column
align="center"
prop="name"
label="名称"
width="150">
</el-table-column>
<el-table-column align="center" :label="item.name" v-for="(item,index) in class_list" :key="index">
<el-table-column
align="center"
label="男"
width="120">
<template slot-scope="scope">
<div v-for="(v,k) in scope.row.data" :key="k" v-show="v.classId == item.id">
<el-input-number style="width: 100%;" v-model="v.man" :controls="false"></el-input-number>
</div>
</template>
</el-table-column>
<el-table-column
align="center"
prop="name"
label="女"
width="120">
<template slot-scope="scope">
<div v-for="(v,k) in scope.row.data" :key="k" v-show="v.classId == item.id">
<el-input-number style="width: 100%;" v-model="v.woman" :controls="false"></el-input-number>
</div>
</template>
</el-table-column>
</el-table-column>
<el-table-column
align="center"
prop="total"
label="合计">
</el-table-column>
</el-table>
school_table: [
{
id: 1,
name: '1小学',
total: 1,
data:[
{classId:1, man:1, woman:2},
{classId:2, man:3, woman:4},
],
},
{
id: 2,
name: '2小学',
data:[
{classId:1, man:7, woman:8},
{classId:2, man:9, woman:10},
],
}
],
school_list: [
{
id: 1,
name:'1小学'
},
{
id: 2,
name:'2小学'
},
],
class_list:[
{
id: 1,
name:'一年级'
},
{
id: 2,
name:'二年级'
}
]
文字提示超出屏幕(show-overflow-tootip )
解决方法
<style>
.el-tooltip__popper {
width: 250px;
}
</style>
弹出框(el-popover)
<el-table ref="dataTable" v-loading="loading" :data="managerList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="名称" align="center" prop="createTime">
<template slot-scope="scope">
<el-popover
placement="top-end"
width="100"
trigger="hover"
>
哈哈哈哈啊哈哈哈哈啊哈哈哈哈啊哈哈哈
<span slot="reference">名称</span>
</el-popover>
</template>
</el-table-column>
</el-table>
复选框偏移,有小黑点
当宽度小于30的时候会出现向左偏移问题
<el-table-column
type="selection"
width="25">
</el-table-column>
复选框禁用
<el-table v-loading="loading" :data="managerList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" :selectable="selectMethod"/>
<el-table-column label="名称" align="center" prop="createTime"></el-table-column>
</el-table>
selectMethod(row) {
console.log(row)
return row.createTime == '2023-08-17 15:33:27' // 创建时间为 2023-08-17 15:33:27 可以被选
},
可以选中的规则
:selectable="selectMethod"
复选框默认选中
<el-table ref="dataTable" :data="managerList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="名称" align="center" prop="createTime"></el-table-column>
</el-table>
getList() {
this.loading = true
getTableList().then(response => {
this.list = response.rows
this.list.forEach(element => {
this.$nextTick(() => {
if (element.createTime == '2023-08-17 15:33:27') {
this.$refs.dataTable.toggleRowSelection(element, true)
}
})
});
this.total = response.total
this.loading = false
});
},
设置选中项
this.$refs.dataTable.toggleRowSelection(element, true)
动态添加列
新增之后
<el-button type="primary" @click="addCol"> 新增列</el-button>
<el-table :data="list">
<el-table-column prop="paramName" :label="item" v-for="(item,index) in date" :key="index">
<template slot-scope="scope">{{ scope.row[item] }}</template>
</el-table-column>
</el-table>
list: [
{
'年': '2023',
'月': '01',
'日': '01',
'时': '01',
'分': '01',
'秒': '01'
},
{
'年': '2023',
'月': '02',
'日': '02',
'时': '02',
'分': '02',
'秒': '02'
}
],
date: ['年', '月', '日']
addCol() {
this.date.push('时')
},
动态添加列导致表格闪烁
方法一:官方提供的方法
新增列后,重新计算单元格高度和宽度渲染到页面,从而发生闪烁。
beforeUpdate(){
this.$nextTick(() => { //在数据加载完,重新渲染表格
this.$refs['table'].doLayout();
})
}
方法二:设置独一无二的key
<el-button type="primary" @click="addCol"> 新增列</el-button>
<el-table :data="list" :key="date">
<el-table-column prop="paramName" :label="item" v-for="(item,index) in date" :key="index">
<template slot-scope="scope">{{ scope.row[item] }}</template>
</el-table-column>
</el-table>
list: [
{
'年': '2023',
'月': '01',
'日': '01',
'时': '01',
'分': '01',
'秒': '01'
},
{
'年': '2023',
'月': '02',
'日': '02',
'时': '02',
'分': '02',
'秒': '02'
}
],
date: ['年', '月', '日']