vue 中的 table上设置column.ellipsis让单元格内容根据宽度自动省略，鼠标hover上显示完整内容

官网实例

<template>
  <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>

实际项目实现

问题描述：

根据官网实例知在字段中加ellipsis: true,属性即可，但是实际上只实现了让多余内容省略显示，鼠标hover上没有反应并不会出现具体内容。

排查原因知：

官网上的样式生效是在td上，实际项目中对table进行了封装重写，td下面还有个span，内容是在span中。

解决方法：

在span上增加:title="text"。

<a-table class="param-table" size="small" type="dashed" bordered :dataSource="dataSource" :columns="columns"
      :rowKey="(record) => record.key" @change="changePage" :pagination="pagination" :loading="loading">
    <template v-for="(col,index) in editableColumns" :slot="col" slot-scope="text, record, index">
        <span :key="col" :title="text">
            <a-input v-if="record.editable && col.indexOf('value') == -1" :maxLength="64" style="margin: -5px 0" :value="text"/>
            <template v-else-if="col.indexOf('value') != -1">
                <el-popover placement="left" width="auto" trigger="hover">
                    <el-table :data="record.rangeSource">
                        <el-table-column width="100%" property="rangeValue" label="取值范围"></el-table-column>
                    </el-table>
                    <span slot="reference" class="ant-table-row-cell-ellipsis value-style" style="display:block; cursor:pointer; padding:8px;height: 37px;">{{ text }}</span>
                </el-popover>
            </template>
            <template v-else>{{ text }}</template>
        </span>
    </template>
</a-table>