项目需求
1.有一个大概40列*80行的table列表,除了在小屏幕上希望可以滚动显示,并且在打屏幕上需要全屏,不可滚动、不可分页的显示所有数据
2.前两列固定在左侧,且宽度固定
3.其他列如果列少时需要适应屏幕宽度显示,列多时需要有最大宽度并有滚动效果
遇到问题
在列少时:比如除前两个列之外还有两列,这两列的内容没有撑满表格,而强两列的固定列重复显示两次如下图所示
原因是我在后面的列的设置中加入了
ellipsis: true,
minWidth: 50,
这两个参数所以就不行了
可能上面说的太笼统,下面我就给出一个稍微全的代码
<template>
<div>
<a-table
:columns="columns"
:data-source="tabledata"
bordered
:pagination="false"
:scroll="{ x: true }"
@change="onChange"
>
<span :slot="id" slot-scope="text, record">
<!-- 插槽内容 -->
</span>
</a-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '',
dataIndex: 'name',
key: 'name',
fixed: 'left',
children: [
{
title: '',
children: [
{
title: '地址',
dataIndex: 'address',
key: 'address',
width: 70
//ellipsis: true,
//minWidth: 50,这里是错误的原因,不应该加入这两个参数
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
scopedSlots: { customRender: 'namess' },
width: 70
//ellipsis: true,
//minWidth: 50,这里是错误的原因,不应该加入这两个参数
}
]
}
]
}
]
}
},
created() {
this.GetEmployeePower()
},
mounted() {},
computed: {},
methods: {
// 因为我的列表列是通过接口获取的动态数据,且是树形表头,并且每个单元格都是插槽,所以需要二次处理
GetEmployeePower() {
this.columns.push(列表列内容)
}
}
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-thead > tr > th .ant-table-header-column {
div {
span {
display: inline-block;
max-width: 90px;
vertical-align: top;
}
}
}
</style>
emmm,写的比较简便,如果通过这个代码不太明白的地方可以私信交流