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' },
},

2. 如何实现表头居中对齐，内容左对齐？

使用ant-design-vue中customCell属性

 {
          title: '部门职责',
          dataIndex: 'duty',
          key: 'duty',
          width: '70%',
          align: 'center',
          customCell: () => {
            return {
              style: {
                //可以定义样式
                'text-align': 'left'
              },
            };
          },
        },

3. 如何合并单元格？

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
              }
            }
          }

4. 想要合并单元格，又要使用插槽，怎么实现？

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
              }
            }
          },