vxe-table的使用

以下代码包括的内容有,双击,单击事件,表格样式,翻页序号,复选框事件,表尾合计,划过显示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.列宽自适应参考

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值