vxe-table的使用

原创已于 2024-11-18 15:00:32 修改 · 603 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2024-11-18 14:56:56 首次发布

以下代码包括的内容有，双击，单击事件，表格样式，翻页序号，复选框事件，表尾合计，划过显示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-CSDN博客

4.列宽自适应参考

vue vxe-table自适应表格内容宽度_vxe-table 宽度自适应-CSDN博客