Ant-design-vue Table组件customRow属性使用
官网示例使用方式最终实现的效果官网示例
使用方式
// 表格中加入customRow属性并绑定一个custom方法<a-tablerowKey="stockOrderCode":columns="columns":dataSource="dataSource":pagination="pagination":customRow="customRow"></a-table>// methods中定义方法customRow(record, index) {return {// 这个style就是我自定义的属性，也就是官方文档中的propsstyle: {// 字体颜色color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',// 行背景色'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',// 字体类型'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',// 下划线'text-decoration':record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',// 字体样式-斜体'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',// 字体样式-斜体'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',},// draggable的设置方式domProps: {draggable: true},on: {// 鼠标单击行click: event => {// do something},},}},
最终实现的效果
最终实现表格行样式的自定义
