先贴一张成品图
目录
一开始想看看怎么封装这个属性(未解决)
参考了:(实测用不了!!!)
二次封装组件调用row-class-name方法
二次封装el-table,调用row-class-name方法
都是把属性封装到方法了
看了下官方文档确实是可以传入一个方法
我就试着写了下
table.vue
// 多余的代码删掉了
// script setup lang="ts"
const emit = defineEmits([
'rowClassName'
])
function rowClassName({ row, rowIndex }: {row: any, rowIndex: number}) {
let data = ''
emit('rowClassName', { row: row, rowIndex: rowIndex }, (val: string) => { data = val })
return data
}
// template
<ElTable
ref="$table"
v-bind="defaultAttr"
:data="tableData"
:row-class-name="tableRowClassName"
/>
引用的文件
index.vue
// 多余的代码删掉了
// script setup lang="ts"
const tableRowClassName = (obj, callback) => {
if (obj.row.deviceState === 0) {
console.log(obj.row.deviceState)
callback('warning-row')
// return 'danger-row'
}
else if (obj.row.deviceState === 1) {
callback('success-row')
// return 'danger-row'
}
else {
callback('')
// return 'success-row'
}
}
// template
<base-table
ref="$table"
:api="getListApi"
@row-class-name="tableRowClassName"
>
<base-table-column prop="deviceName" label="名称" />
<base-table-column prop="deviceNo" label="编号" />
<base-table-column
prop="deviceState"
label="状态"
:formatter="formatterState"
/>
<base-table-column label="操作">
<template #default="{ row }">
<el-link @click="handleView(row)">
查看
</el-link>
</template>
</base-table-column>
</base-table>
// style
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9) !important;
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9) !important;
}
但是,这两个封装返回都是callback,结果就是一行有颜色然后后面都没有颜色了。
下两张图是上面链接里的👇
官方文档是这样
官方function是return一个string。被封装后属性变成了事件,我就在寻找事件可以get到返回值的方法找了好久……(根本没有!因为本身el-table的rowClassName是一个属性,需要用冒号写法才能获取值,用@写法返回的值无法赋值到属性上,因为那是一个事件啊)
但是我还是把代码贴到这里,有没有大佬看看这种写法能不能获取值啊
function rowClassName({ row, rowIndex }: { row: any; rowIndex: number }) {
// let data = ''
return emit('rowClassName', { row, rowIndex })
// return data
}
// 引用的文件里直接用官方写的方法,然后 @row-class-name="tableRowClassName"
解决:后面我决定把属性穿透,直接引用官方的
prop定义的时候引入ElTableProps
直接使用官方写法。
然后问题来了,偶数行不生效,奇数行好的。(改了下样式解决了)
// 多余的代码删掉了
// script setup lang="ts"
const items = [
{ deviceName: '测试1', deviceNo: '0', deviceState: 0 },
{ deviceName: '测试2', deviceNo: '1', deviceState: 1 },
{ deviceName: '测试3', deviceNo: '2', deviceState: 2 },
]
const tableRowClassName = ({
row,
rowIndex,
}: {
row: any
rowIndex: number
}) => {
if (row.deviceState === 0) {
return 'warning-row'
}
else if (row.deviceState === 1) {
return 'success-row'
}
else if (row.deviceState === 2) {
return 'error-row'
}
return ''
}
// template
<base-table
ref="$table"
:api="getListApi"
:row-class-name="tableRowClassName"
>
<base-table-column prop="deviceName" label="名称" />
<base-table-column prop="deviceNo" label="编号" />
<base-table-column
prop="deviceState"
label="状态"
:formatter="formatterState"
/>
<base-table-column label="操作">
<template #default="{ row }">
<el-link @click="handleView(row)">
查看
</el-link>
</template>
</base-table-column>
</base-table>
<style>
.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-table .error-row {
--el-table-tr-bg-color: var(--el-color-error-light-9);
}
.vp-doc tr:nth-child(2n) {
background-color: var(--el-table-tr-bg-color);
}
</style>
重点是这个,我从控制台找出来的需要覆盖的样式
.vp-doc tr:nth-child(2n) {
background-color: var(--el-table-tr-bg-color);
}
百度了好多说什么斑马纹stripe要删除,style不能使用scope属性,这些我都没用,还是样式问题。
圈出来的是原来导致我偶数行不生效的样式,我写了代码覆盖掉就好了。
其他的评论区讨论