vue+ant design 中的table想要高度根据内容撑开现在换行后操作列显示错行
这种情况可能是由于单元格内容过长造成的,可以尝试以下解决方法:
-
设置列的宽度:可以通过设置每列的宽度来避免单元格内容过长造成的错行问题。
-
禁止单元格换行:可以通过CSS样式设置单元格不允许换行,这样可以避免单元格内容过长造成的错行问题。
-
使用 ellipsis 属性:可以使用CSS的 ellipsis 属性来实现单元格内容过长时自动省略,这样可以避免错行问题。
示例代码:
<template>
<div>
<a-table
:columns="columns"
:dataSource="dataSource"
:pagination="false"
:scroll="{ y: 'calc(100vh - 260px)' }"
:components="{ body: { row: CustomRow } }"
/>
</div>
</template>
<script>
import { Table } from 'ant-design-vue';
const { Column } = Table;
export default {
data() {
return {
dataSource: [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park, New York No. 1 Lake Park, New York No. 1 Lake Park, New York No. 1 Lake Park',
operation: 'Edit'
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
operation: 'Edit'
},
{
key: 3,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
operation: 'Edit'
}
],
columns: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 150
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 70
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
ellipsis: true
},
{
title: 'Operation',
dataIndex: 'operation',
key: 'operation',
width: 100,
scopedSlots: { customRender: 'operation' }
}
]
}
},
components: {
CustomRow: {
props: {
index: Number,
row: Object
},
render() {
const { index, row } = this.$props;
const columns = this.$parent.columns;
return (
<tr>
{columns.map((col) => (
<td style={{ background: index % 2 === 0 ? '#f0f0f0' : '#fff' }}>
{col.scopedSlots && col.scopedSlots.customRender ? col.scopedSlots.customRender(row) : row[col.dataIndex]}
</td>
))}
</tr>
);
}
}
}
}
</script>
在上述示例代码中,我们使用了CSS的 ellipsis 属性来实现单元格内容过长时自动省略。通过设置 ellipsis 属性,当单元格内容超过单元格宽度时,会自动省略,并在单元格末尾显示省略号。
原文地址: https://cveoy.top/t/topic/b5vM 著作权归作者所有。请勿转载和采集!