ant design vue 中 table 组件 让选中的表格中的某一项高亮显示
table 组件 让选中的一项高亮显示<template><a-tableref="clientLeve_table"borderedsize="middle"rowKey="id":columns="clientLeve_columns":dataSource="clientLeve_dataSource":pagination="false"class=
·
table 组件 让选中的一项高亮显示
<template>
<a-table
ref="clientLeve_table"
bordered
size="middle"
rowKey="id"
:columns="clientLeve_columns"
:dataSource="clientLeve_dataSource"
:pagination="false"
class="j-table-force-nowrap"
:customRow="customRow"
>
</a-table>
</template>
export default{
data(){
return{
clientLeve_columns:[],
clientLeve_dataSource:[],
leftAlignId:""
}
},
methods:{
// 自定义行
customRow(record, index) {
console.log(record, index)
return {
// 自定义属性,也就是官方文档中的props,可通过条件来控制样式
style: {
// 设置字体颜色
// 'color': record.id === this.leftAlignId ? '#fff' : '',
// 设置行背景色
'background-color': record.id === this.leftAlignId ? '#E6F7FF' : ''
// 设置字体类型
// 'font-family': 'Microsoft YaHei',
// // 下划线
// 'text-decoration': 'underline',
// // 字体样式-斜体
// 'font-style': 'italic',
// // 字体加粗
// 'font-weight': 'bold'
},
on: {
// 鼠标单击行
click: event => {
// 记录当前点击的行标识
this.leftAlignId = record.id
}
}
}
},
}
}
思路:在a-table 上绑定属性,值是一个方法customRow,在methods中定义一下customRow方法, 定义一个变量leftAlignId ,并挂载到data上,当选中表格中的某一行时会触发customRow的click 方法,将当前id 保存起来, 随后到customRow的props中给当前选中的tr设置样式 属性即可。
更多推荐
已为社区贡献4条内容
所有评论(0)