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

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

    • 官网示例
    • 使用方式
    • 最终实现的效果

官网示例

Ant-design-vue Table组件customRow属性使用_第1张图片

使用方式

	// 表格中加入customRow属性并绑定一个custom方法
	
	

	// 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',
        },
        on: {
          // 鼠标单击行
          click: event => {
            // do something
          },
        },
      }
    },

最终实现的效果

最终实现表格行样式的自定义
Ant-design-vue Table组件customRow属性使用_第2张图片

你可能感兴趣的:(Ant,Design,Vue)