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>