a-table移动端点击提示和合并单元格冲突的解决办法

目录

前言

一、合并单元格的方法

二、插槽的使用方法

1.column文件中添加的内容

2.a-table中添加的内容

三、冲突的解决办法

---

前言

        移动端使用a-table时，文字超过宽度自动隐藏，但是手指放上去并没有提示窗导致内容看不全。本来想使用插槽，对宽度不够的内容添加a-popover，但是表格需要合并单元格，导致插槽冲突不生效。

一、合并单元格的方法

通过colSpan和rowSpan参数合并单元格的列或者行。

customRender: (value, row, index) => {
      const obj = {
        children: value,
        attrs: {},
      };
      if (value == '合计') {
        obj.attrs.colSpan = 2;
      }
      return obj;
    },

二、插槽的使用方法

1.column文件中添加的内容

scopedSlots: { customRender: 'popover' },

2.a-table中添加的内容

<template slot="popover" slot-scope="text, record">
   <a-popover>
     <template slot="content">
              <div>{{ text }}</div>
            </template>
            <span href="javascript:;" style="color:#3588DE;">{{ text }}</span>
          </a-popover>
        </template>

三、冲突的解决办法

由于合并单元格和添加插槽都需要使用customRender，从而导致插槽不生效，推荐使用以下办法：

import  Popover from 'ant-design-vue/es/popover'


this.columns[i].customRender = (value, row, index) => {
                const obj = {
                  children: (<Popover>
                    <template slot="content">
                      <div>{ value }</div>
                    </template>
                    <span href="javascript:;">{ value }</span>
                  </Popover>),
                  attrs: {}
                }
                let rowCount = 0
  
                if (index > rowCount) {
                  obj.attrs.rowSpan = 0
                }

                return obj
              }

在children中加入需要使用的组件，这样移动端就能手指放上去显示全部内容了。