ant-design-vue——table td文字超出显示省略号

 

 方法一：

 

vue:

<template>
    <a-table :locale="{emptyText: '暂无数据'}" 
    :columns="columns" :dataSource="dataTable" 
    :pagination="false">
           <template slot="name" slot-scope="text, record, index">
                <span v-html="setName(text)"></span>
            </template>
            <span slot="action" slot-scope="text, record">
                   <a-button>处理</a-button>
                   <a-button>删除</a-button>
                   <a-button>查看</a-button>
             </span>
    </a-table>
</template>

<script>
    export default {
        data() {
            return {
                // 表格
                columns: [
                    {
                        title: '序号',
                        width: '100px',
                        customRender: (text, record, index) => {
                            return index + 1;
                        }
                    },
                    {
                        title: '标题',
                        dataIndex: 'name',
                        key: 'name',
                        width: '100px', //限制宽度
                        scopedSlots: {customRender: 'name'},
                    },
                    {
                        title: '操作',
                        key: 'action',
                        scopedSlots: {customRender: 'action'},
                        align: 'center',
                        width: '300px'
                    },
                ],
                dataTable: [{
                    name:'啊大苏打发实打实大苏打大苏打撒旦大苏打撒旦大大实打实的大苏打实打实的啊大苏打撒旦 大苏打撒旦啊实打实的阿萨十大啊啊'
                }，
                {
                    name:'啊大苏打发实打实大苏打大苏打撒旦大苏打撒旦大大实打实的大苏打实打实的啊大苏打撒旦 大苏打撒旦啊实打实的阿萨十大啊啊'
                }
                ],
            }
        },
        methods: {
            setName(e) { //文字超出显示省略号
                return '<span  title="' + e + '" style="display:inline-block;width: 100%;text-align: center;' +
                    '        overflow : hidden;' +
                    '        text-overflow: ellipsis;' +
                    '        white-space: nowrap;">' + e + '</span>'
            },
        }        
    }
</script>

 

方法二：

 

vue:

<template>
    <a-table  :locale="{emptyText: '暂无数据'}" :columns="dataColumns" :dataSource="data">
        <span slot="title" slot-scope="text, record, index">
             <span :title="text">{{text}}</span>
         </span>
         <template slot="send" slot-scope="text, record, index">
             <span :title="text">{{text}}</span>
           </template>
    </a-table>
</template>

<script>
    const renderContent = (value, row, index) => {
        const obj = {
            children: value,
            attrs: {}
        };
        return obj;
    };

    const dataColumns= [
        {
            title: "序号",
            dataIndex: "index",
            width: "50px",
            customRender: renderContent
        },
        {
            title: "标题",
            dataIndex: 'title',
            key: 'title',
            width: '300px',
            scopedSlots: {customRender: 'title'},
            ellipsis: true, //需ant版本为1.5及以上
        },
        {
            title: "单位",
            dataIndex: 'send',
            key: 'send',
            scopedSlots: {customRender: 'send'},
            ellipsis: true,
        },
    ];

    const data = [{
　　　　　　title:'sgdsgdgadgafasasfasasfsafasfasdsadasdasdasdasdsadasdasd',
　　　　　　send:'v大师傅士大夫发生的放大发撒大苏打实打实的是的撒旦啊大苏打'
    },
　　{
　　　　　　title:'sgdsgdgadgafasasfasasfsafasfasdsadasdasdasdasdsadasdasd',
　　　　　　send:'v大师傅士大夫发生的放大发撒大苏打实打实的是的撒旦啊大苏打'
    }];
        
    export default {
        data() {
            return {
               dataColumns,
                data,
            }
        }
    }
</script>