Ant-design-vue Table组件customRow属性使用

官网示例

使用方式

	// 表格中加入customRow属性并绑定一个custom方法
	<a-table
	  rowKey="stockOrderCode"
	  :columns="columns"
	  :dataSource="dataSource"
	  :pagination="pagination"
	  :customRow="customRow"
	>
	</a-table>

	// methods中定义方法
	customRow(record, index) {
      return {
        // 这个style就是我自定义的属性，也就是官方文档中的props
        style: {
          // 字体颜色
          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
          },
        },
      }
    },

最终实现的效果

最终实现表格行样式的自定义