以下代码包括的内容有,双击,单击事件,表格样式,翻页序号,复选框事件,表尾合计,划过显示Tooltip提示
<vxe-table
:scroll-y="{ gt: 0, enabled: true, mode: 'wheel' }" //虚拟滚动
show-overflow
:header-cell-style="{
'text-align': 'center',
color: '#000000',
backgroundColor: '#f2f2f2',
width: 'auto'
}"
min-height="48px"
ref="tableRef"
:cell-style="{ 'text-align': 'center', color: '#000000' }"
:data="state.tableData"
@checkbox-change="handleSelectionChange"
@checkbox-all="selectAllCheckboxChange"
@cell-dblclick="rowDblclick"
@cell-click="rowClick"
:seq-config="{ seqMethod }"
style="width: 100%"
border
resizable
stripe
>
<vxe-column type="checkbox" width="55" fixed="left" />
<vxe-column title="序号" type="seq" align="center" width="60" />
<vxe-column title="名字" field="name" min-width="120" show-overflow>
<template #default="scope">
<div> {{ scope.row.name }} </div>
</template>
</vxe-column>
</vxe-table>
1.单击双击事件
//state.selection 为自定义字段
const rowDblclick = ({ row }) => {
console.log(row)
}
//单点选中
const rowClick = ({ row, $table }) => {
$table.toggleCheckboxRow(row)
state.selection = $table.getCheckboxRecords()
}
//复选框事件
const handleSelectionChange = ({ row, checked, records }) => {
state.selection = records
}
const selectAllCheckboxChange = (checked) => {
state.selection = checked.records
}
2.翻页序号
//state.orderListQuery.page state.orderListQuery.siz 定义的页码
const seqMethod = ({ rowIndex }) => {
return (state.orderListQuery.page - 1) * state.orderListQuery.size + rowIndex + 1
}
3.自定义表尾合计 参考
【vxe-table】表尾合计行,数据处理方法footer-method的使用_vxe-table footer-method-优快云博客
4.列宽自适应参考