antd+vue表格固定列之后出现空白列,如下:
代码如下:
<a-col :md="24">
<h4>表格固定列</h4>
<a-table :columns="columns" :data-source="dataTable" :scroll="{ x: 900 }" bordered>
<a slot="action" slot-scope="text, record" href="javascript:;" @click="handleOk(record.id)">action</a>
</a-table>
</a-col>
export default {
data () {
return {
columns: [
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
// width: 100,
title: 'Action',
key: 'operation',
fixed: 'right',
scopedSlots: { customRender: 'action' }
}
],
dataTable: [
{
address: 'London Park'
}
]
}
}
}
改进方案:
给固定列添加宽度:
{
width: 100,
title: 'Action',
key: 'operation',
fixed: 'right',
scopedSlots: { customRender: 'action' }
}