关于Ant Design of Vue中 的a-table一些使用问题
1.添加行点击及复选框<template><div><a-table:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}":columns="columns":dataSource="data":c...
·
1.添加行点击及复选框
<template>
<div>
<a-table
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:columns="columns"
:dataSource="data"
:customRow="onClickRow"
/>
</div>
</template>
<script>
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [];
for (let i = 0; i < 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age: 32,
address: `London, Park Lane no. ${i}`,
});
}
export default {
data() {
return {
data,
columns,
selectedRowKeys: [], // Check here to configure the default column
selectedRows: [] // 选中的整行数据
loading: false,
};
},
methods: {
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectedRows = selectedRows
},
onClickRow (record) {
return {
on: {
click: () => {
const rowKeys = this.selectedRowKeys
const rows = this.selectedRows
if (rowKeys.length > 0 && rowKeys.includes(record.key)) {
rowKeys.splice(rowKeys.indexOf(record.key), 1)
rows.splice(rowKeys.indexOf(record.key), 1)
} else {
rowKeys.push(record.key)
rows.push(record)
}
this.selectedRowKeys = rowKeys
this.selectedRows = rows
}
}
}
}
},
};
</script>
2.固定列重叠问题
官方给的建议
对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 scroll.x 配合使用。
若列头与内容不对齐或出现列重复,请指定固定列的宽度 width。
建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x。
const columns = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ 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' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
scopedSlots: { customRender: 'action' },
},
];
我在项目中为其他列添加width,scroll x设置为这些width之和,添加一个空列,让这列自适应宽度
{
title: ''
},
3.纵向滚动条(表格高度随屏幕高度改变而改变)
<a-table
:scroll={y: scrollY}
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:columns="columns"
:dataSource="data"
:customRow="onClickRow"
/>
data(){
return {
scrollY: document.body.clientHeight - 386, // 表格竖向滚动条,386是页面其他元素的高度
screenHeight: document.body.clientHeight, // 屏幕的高度
}
}
watch: {
// 监听屏幕高度改变表格高度
screenHeight (val) {
// 初始化表格高度
this.scrollY = val - 386
}
},
mounted () {
// 监听屏幕高度
window.onresize = () => {
return (() => {
window.screenHeight = document.body.clientHeight
this.screenHeight = window.screenHeight
})()
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)