CSS
表格表头样式
- html
<el-table :header-cell-style="getRowClass"></el-table>
- js
// 设置表格第一行的颜色
getRowClass ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background:#2A3253'
} else {
return ''
}
},
https://blog.csdn.net/Feast_aw/article/details/80777577
表格默认hover背景颜色
.el-table__body tr:hover>td {
background: #1b223e !important;
}
https://segmentfault.com/q/1010000012532291?sort=created
https://blog.csdn.net/qq_39313596/article/details/83015358
表格设置头部第一行的背景颜色
https://blog.csdn.net/Feast_aw/article/details/80777577
表格点击一行,背景色变化
https://blog.csdn.net/zhongmei121/article/details/81560134
表格高度自适应
https://segmentfault.com/q/1010000013671400
表格宽度自适应
- 百分比显示列
<el-table style="width: 100%;">
<el-table-column min-width="25%"></el-table-column>
</el-table>
表格行高 (row-style)
<el-table :row-style="rowStyle"></el-table>
data () {
return {
rowStyle: {maxHeight: 57 + 'px', height: 57 + 'px'},
}
}
注意:不能直接写 row-style="height: 100px;",
会报错 Invalid prop: type check failed for prop "rowStyle". Expected Object, Function, got String。
- 解释:该变量需要一个对象或者方法,而你给他的是一个string。
- 解决方法:应该在前面加上: 代表变量,在下面定义一个对象 将对象填入 :row_style="yourObject"
https://blog.csdn.net/qq_39313596/article/details/81477735
表格 滚动条样式修改
<style>
/* 滚动条的宽度 */
.el-table .el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条的滑块 */
.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #e6e6e6 !important;
border-radius: 3px;
}
</style>
https://segmentfault.com/q/1010000016366942?utm_source=tag-newest
JS
表格路由跳转
<el-table-column label="问题"
width="500">
<template slot-scope="scope">
<router-link v-if="isHelpResolve" :to="{ name: 'helpsResolve', params: {id: scope.row.id} }">
<span>{{ scope.row.title }}</span>
</router-link>
</template>
</el-table-column>
https://www.jianshu.com/p/fe96cd805f3d
表格手风琴,且动态获取表格展开的数据
<el-table :data="tableData"
:row-key="getRowKeys"
@expand-change="expandChange"
:expand-row-keys="expands">
</el-table>
data () {
return {
// 获取row的key值
getRowKeys(row) {
return row.id;
},
// 要展开的行,数值的元素是row的key值
expands: []
}
}
expandChange (row) {
if (this.expands.indexOf(row.id) >= 0) {
this.expands.shift() // 收起当前行
return
}
this.expands = []
this.expands.push(row.id) // 只展开当前行
this.tableData.forEach((item, index) => {
if (item.id == row.id) {
// 直接为动态展开的数据,赋值
this.$set(this.tableData[index], 'childData', this.childData)
// this.$set(要赋值的对象,属性名,数据) // 如果赋值后数据没有刷新,就需要提前清空数据
}
}, this)
},
https://segmentfault.com/q/1010000008981772
表格嵌套并且在子表格没有数据的时候隐藏展开按钮
:row-class-name="getRowClass"
getRowClass(row, rowIndex) {
if (row.row.children.length == 0) {
// 判断当前行是否有子数据
return 'row-expand-cover'
}
},
.row-expand-cover td:first-child .el-table__expand-icon {
display: none;
}
https://blog.csdn.net/Null_Bugs/article/details/81146044
表格提交时获取所有选中的checkbox的数据
https://blog.csdn.net/rickiyeat/article/details/76595308
表格复选框配合分页,数据如何回显(reserve-selection与row-key结合)
- html
<el-table :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="tableTrue"></el-table-column>
</el-table>
- js
data () {
return {
// 获取row的key值
getRowKeys (row) {
return row.id
},
tableTrue: true
}
}
https://segmentfault.com/q/1010000009772656
表格滚动条回到顶部
el-table 中设置 ref="mytable"
this.$refs.mytable.bodyWrapper.scrollTop =0;
https://www.jianshu.com/p/8d7f28d7bd87
表格复选框,清空选中的值
<el-table
ref="multipleTable"
:data="tableData">
</el-table>
// 加到点击事件或其他事件中
this.$refs.multipleTable.clearSelection();
table列超出部分省略加悬浮提示(2.8.2新加功能)
<el-table-column :show-overflow-tooltip="true">
</el-table-column>
https://blog.csdn.net/xdhc304/article/details/80611227
表格固定表头和某一列
- 固定表头:(给表格设置高)
<el-table :height="tableHeight"></el-table> // 可以是数字,也可以自定义数值
- 固定某一列:(给列设置 fixed)
<el-table-column prop="name" fixed></el-table-column>
获取表格每一行的下标(用作表格序号)
<template scope="scope">
<span v-text="scope.$index+1"></span>
</template>
https://blog.csdn.net/y1s2y3/article/details/82733179
获取每行的索引值
<el-table :row-class-name="tableRowClassName"
@row-click = "onRowClick"></el-table>
methods: {
tableRowClassName ({row, rowIndex}) {
//把每一行的索引放进row
row.index = rowIndex;
},
onRowClick (row, event, column) {
//行点击消除new标记
var index = row.index;
var deleteIndex = Array.indexOf(this.showIndexArr, index);
if (deleteIndex != -1) {
this.showIndexArr.splice(deleteIndex,1);
}
}
}
https://www.cnblogs.com/yangyi9343/p/9295293.html
表格点击展开:
隐藏展开符号:
.el-table__expand-column .cell {
display: none;
}
将点击事件赋值到其他地方:
<el-table ref="table">
<el-table-column label="操作">
<template slot-scope="props">
<el-button type="primary" @click="handleCheck(props.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
handleCheck(row) {
const $table = this.$refs.table
$table.toggleRowExpansion(row)
$table.toggleRowSelection(row)
}
https://www.cnblogs.com/daipianpian/articles/9516088.html
单击某一行数据时选中对应的复选框
<el-table @row-click="clickRow" ref="moviesTable" :data="tableData"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
</el-table>
clickRow(row){
this.$refs.moviesTable.toggleRowSelection(row)
}
https://blog.csdn.net/gongyi199393/article/details/80902845
element-ui的table列超出部分省略加悬浮提示
<el-table-column :show-overflow-tooltip="true">
</el-table-column>
https://blog.csdn.net/xdhc304/article/details/80611227
Element UI的表格双击之后可编辑(没试过)
https://segmentfault.com/q/1010000014417142/a-1020000014418134
elementUi table根据不同状态变成不同颜色的背景色
<el-table :row-class-name="tableColor"></el-table>
tableColor({row, rowIndex}) {
if(rowIndex == rowIndex){
if(row.status == 1){
return 'tableColor-blue'
}else if(row.status == 2){
return 'tableColor-yellow'
}else if(row.status == 3){
return 'tableColor-violet'
}else if(row.status == 4){
return 'tableColor-green'
}
}
}
http://www.czl.mobi/a/qianduankuangjia/Vue/112.html
表格展开行报错
报错: [Vue warn]: Error in callback for watcher "data": "Error: if there's nested data, rowKey is required."
- 表面的意思是如果有嵌套的数据,需要在el-table标签中新增row-key字段
当tableData数据格式为以下形式会出现上面的报错:
tableData: [{
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
children:[{
name:'土鸡蛋',
desc:'美味...'
}]
}]
问题就出现在key为children名字上,如果换成其他命名不会报错。。。。
如下可使用array.map函数处理下数据就可以解决问题了。。。
let handleData = tableData.map(item => {
return {
name: item.name,
category: item.category,
desc: item.desc,
childrens: item.children
};
});
https://www.cnblogs.com/changxue/p/10719454.html
表格中禁用部分复选框
<el-table-column type="selection" :selectable="selectable"></el-table-column>
methods: {
selectable(row, index) {
if (row.status == 1) {
return true
} else {
return false
}
}
}
https://www.jb51.net/article/170515.htm
编辑,新增,删除一行
- tableData中push一条新数据(新增)
tableData.push({ fildna: '',fildtp:'',remark:''})
https://blog.csdn.net/alokka/article/details/73719371
表格数据为空时自定义显示内容
<el-table :data="tableData">
<template slot="empty">
<div class="noTableData">
暂无数据,或点击 <span @click="getMakeList(1)">“刷新”</span>
</div>
</template>
</el-table>
https://blog.csdn.net/m0_46627730/article/details/106034638
自定义表头内容
<el-table-column
prop="delete"
label="删除"
width="120"
>
<template
slot="header"
slot-scope="{ column, $index }"
>
<i
class="el-icon-delete"
@click="clearAll"
>
</i>
</template>
<template slot-scope="scope">
<el-button
type=""
@click="handleDelete(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
https://www.cnblogs.com/wenxinsj/p/10613764.html
删除一行
<el-table :data="tableData">
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
handleDelete(index){ //删除行数
this.tableData.splice(index, 1)
}