element-ui之el-table的使⽤合集(含翻页多选,动态⽣成表头等)
关于 element-ui 使⽤中的其他问题请
⽅法⼀:
<el-table-column
label="序号"
type="index"
width="50"
align="center">
<template v-slot="{ $index }">
<span>{{ $index + pageSize * ( currentPage - 1 ) + 1 }}</span>
</template>
</el-table-column>
/*
$index 当前序号
pageSize 每页显⽰的条数
currentPage 当前页码
*/
⽅法⼆:
<el-table-column
label="序号"
type="index"
width="50"
:index="tableIndex"
align="center" />
// ⽂档中index的类型可以是Function(index),这⾥绑定⼀个⽅法,将返回值赋给index, 即该⾏的索引
...
methods: {
tableIndex(index) {
return index + this.pageSize * ( this.currentPage - 1 ) + 1
}
}
项⽬中的需求:后端返回的接⼝数据是从第0页开始的,el-pagination 中当前页数默认是从1开始的,也就是点击el-pagination的第1页传递给后端的页数是0,点击第2页传递1,点击第3页传递2 ... ...
background
:current-page="currentPage"
:page-size="pageSize" />
export default{
data() {
return {
currentPage: 1, // 当前页数
pageSize: 10, // 每页显⽰条⽬个数
}
},
computed: {
queryParams () {
return {
page: this.currentPage - 1,
size: this.pageSize
}
}
}
}
// 调⽤接⼝的时候把queryParams传递过去就可以了
在项⽬中按需引⼊element-ui的时候,使⽤ el-table 的v-loading 报错,如下:
htmlradio添加切换事件github 上也有相关 issues,
解决⽅法很简单,在 main.js 中将 loading 引⼊ use ⼀下就好了,我是将 element 按需引⼊的组件单独抽离出来了,如下图
项⽬需求如下图:
然后要将选中数据 id 传递给后端。具体代码如下:
<el-table-column label="选择">
<template slot-scope="scope">
<el-radio :label="scope.$index" v-model="radioStatus"
@change.native="getRowSelected(scope.$index, w)"> </el-radio>
</template>
</el-table-column>
... ...
</el-table>
export defalut {
data() {
return {
radioStatus: false, // 是否被选中,默认都是 false
selectedId: '' //选中数据的id
}
},
methods: {
// 获取选中数据
getRowSelected(index, row) {
this.selectedId = row.id
}
}
}
注意:radio 的 label ⼀定要设为不同的值,否则点击⼀个 radio 会选中全部。如果不要显⽰ label,通过样式控制其隐藏就可以了。
表格中某⼀列的数值根据不同等级展⽰不同的背景⾊。具体需求如下:
通过table的cell-style属性,可以设置⼀个固定的 Object 或 Function({row, column, rowIndex, columnIndex}),这⾥⽤了回调的⽅法。实现代码如下:
<el-table :data="tableData" border :cell-stlye="set_cell_style">
<el-table-column label="选择">
... ...
</el-table-column>
</el-table>
... ...
methods: {
set_cell_style({row, column, rowIndex, columnIndex}) {
Num > 20 && column.label === '检测错误数') {
// 返回对象
return {
background: '#F56C6C', color: 'white'
}
} else Num > 10 && column.label === '检测错误数') {
return {
background: '#E6A23C', color: 'white'
}
} else Num > 0 && column.label === '检测错误数') {
// 返回字符串
return 'background: #67C23A; color: white'
}
}
}
// row ⾏数据对象 column 列对象
// 上述 column.label === '检测错误数' 等价于 columnIndex === 4,⽤label主要是以免表格展⽰顺序更换,columnIndex也得相应的更改
注意:使⽤ function 时 return 的返回值如果是 string 类型,在开发环境是可以⽣效的,但是打包上线后失效。所以如果使⽤ function,要返回 object 类型。
el-table 根据后端返回的数据,动态⽣成表头并展⽰相应的值。如后端返回的数据如下:
要求显⽰如下:
其中 name, id, salary ⽤于表头的label显⽰,并通过prop绑定这些数据的值。具体实现如下:
// 处理后端返回的数据data,并定义ruleTableLabel存储label
data.map(item => {
Object.keys(item).map(key => {
!this.ruleTableLabel.includes(key) && this.ruleTableLabel.push(key)
})
})
/
/ 循环并绑定prop
<el-table-column v-for="(key, i) in ruleTableLabel" :key="i" :label="key" :prop="key"></el-table-column>
具体错误如下图所⽰:
其中操作列设置了固定,初始展⽰列表页时没啥问题,但是从详情页返回时就出现了这样⼀个错位,⽤了doLayout⽅法也不⾏。然后查了样式把el-table__fixed-body-wrapper 的top值修改成表头的⾼度就可以了。
这⾥主要是显⽰后端返回的⽇志信息,但是因为这个数据⽐较多,⽽且使⽤show-overflow-tooltip 的列⽂本内容超长,最⼩的也有10+kb,然后⿏标放上去的时候就⼀直闪动,完整的内容也显⽰不出来。具体问题如下图:
然后⽤了 el-tooltip 代替 show-overflow-tooltip 这个属性,具体代码如下:
<el-table-column prop="logMsg" label="⽇志信息" align="center">
<template slot-scope="scope">
<el-tooltip effect="light" :content="w.logMsg" popper-class="log-tooltip" :disabled="w.logMsg | ellipsis" placement="top">
<span v-if="w.logMsg.length > 100">{{ w.logMsg.split(0, 100)[0] + '...' }}</span>
<span v-else>{{ w.logMsg }}</span>
</el-tooltip>
</template>
</el-table-column>
添加过滤器和样式:
//添加过滤器
filters: {
//如果⽂本内容长度少于100,就不显⽰tooltip组件
ellipsis (value) {
if (value.length > 100) {
return false
}
return true
}
}
//并给tooltip组件添加样式
.log-tooltip.el-tooltip__popper{
max-width: 90%;
height: 90%;
left: 5%;
right: 5%;
top: 5%;
bottom: 5%;
margin: 0 auto;
overflow: scroll;
}
注意:el-tooltip__popper的样式如果添加在scoped中是不⽣效的,因为元素默认是追加在body的。通过popper-class属性对样式进⾏限定,否则其他页⾯有⽤到el-tooltip的样式会被覆盖。
在使⽤ element-ui 的 el-table 组件展⽰数据时,有时会要求批量提交不同页⾯勾选数据的功能,当切换分页时,能够记忆所有页⾯勾选的数据,然后进⾏批量操作。官⽹也没有直接提供案例来实现这种业务需求,但可以通过设置row-key、reserve-selection和selection-change事件来实现。
reserve-selection:仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据。
row-key:⾏数据的 Key,⽤来优化 Table 的渲染;在使⽤ reserve-selection 功能与显⽰树形数据时,该属性是必填的。主要⽤来表⽰每⾏数据是通过哪个属性来进⾏区分,⼀般使⽤id。
selection-change:当选择项发⽣变化时会触发该事件。参数 selection 将是所有页⾯已经勾选的数据。
<template>
<el-card>
<el-table :table-loading="loading"
:tableData="tableData"
ref="tableRef"
:row-keys="getRowKeys"
@selectionChange="selectionChange">
<el-table-column :reserve-selection="true" type="selection" width="55" />
... ...
</el-table>
<com-pagination
:
current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:total="total"
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论