a-table遇到的问题

  1. 表格数据中有换行时,如何换行显示?

使用插槽,结合style="white-space: pre-line"实现文字保留原格式来展示。

//插槽
<div slot="txt" slot-scope="value">
    <span style="white-space: pre-line;" >{{value}}</span>  //value要和标签之间不能有换行或空格,不然会出现意外的‘内边距’
</div>

//colums
{
  title: '内容',
  dataIndex: 'content',
  key: 'content',
  align: 'center',
  scopedSlots: { customRender: 'txt' },
},
  1. 如何实现表头居中对齐,内容左对齐?

使用ant-design-vue中customCell属性

 {
          title: '部门职责',
          dataIndex: 'duty',
          key: 'duty',
          width: '70%',
          align: 'center',
          customCell: () => {
            return {
              style: {
                //可以定义样式
                'text-align': 'left'
              },
            };
          },
        },
  1. 如何合并单元格?

customRender: (text, record, index) => {
            const { type } = record
            const temp_Index = this.deptConsumerDtos.findIndex(record => record.type === type)
            const rowSpan = this.deptConsumerDtos.filter(record => record.type === type).length
            if (rowSpan > 1&&type) {
              // 要合并的行中的第一个(从这一行合并)
              if (temp_Index === index) {
                return {
                  children: text,
                  attrs: { rowSpan }
                }
              }
              // 其他要合并的行都设rowSpan=0
              return {
                children: text,
                attrs: { rowSpan: 0 }
              }
            }
            return {
              children: text,
              attrs: {
                rowSpan: 1
              }
            }
          }
  1. 想要合并单元格,又要使用插槽,怎么实现?

customRender和scopedSlots不能同时使用,同时使用时,scopedSlots效果不显示。解决办法如下:

customRender: (text, record, index) => {
            const { deptName,type } = record
            const temp_Index = this.deptConsumerDtos.findIndex(record => record.deptName === deptName&&record.type===type)
            const rowSpan = this.deptConsumerDtos.filter(record => record.deptName === deptName&&record.type===type).length
            //定义插槽要渲染的部分
            const childrenVal=(<span style="white-space: pre-line;" >{text}</span>)
            if (rowSpan > 1&&deptName) {
              // 要合并的行中的第一个(从这一行合并)
              if (temp_Index === index) {
                return {
                  children: childrenVal,
                  attrs: { rowSpan }
                }
              }
              // 其他要合并的行都设rowSpan=0
              return {
                children: childrenVal,
                attrs: { rowSpan: 0 }
              }
            }
            return {
              children: childrenVal,
              attrs: {
                rowSpan: 1
              }
            }
          },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值