建设厅安全证考试报名在哪个网站,网站开发的设计与实现,学校网站开发报价表,建设银行信用卡网站查询文章目录 前言vxe-table官网实现表头拖拽树形表格全键盘操作后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;前端系列文章 #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努力填补技术短板… 文章目录 前言vxe-table官网实现表头拖拽树形表格全键盘操作后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏前端系列文章 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 vxe-table 一款专门用来对Vue3表格进行复杂操作的ui组件库虚拟滚动普通表格的行拖拽表格的全屏展示表格的全键盘操作禁用编辑等。 官网
官网地址
下载 npm install xe-utils vxe-table 配置在main.js或者main.ts里面
import { App, createApp } from vue
import VXETable from vxe-table
import vxe-table/lib/style.cssfunction useTable (app: App) {app.use(VXETable)
}createApp(App).use(useTable).mount(#app)实现表头拖拽
直接复制
templatedivvxe-grid v-bindgridOptionstemplate #toolbar_buttonsvxe-button clickgridOptions.align left居左/vxe-buttonvxe-button clickgridOptions.align center居中/vxe-buttonvxe-button clickgridOptions.align right居右/vxe-button/template/vxe-grid/div
/templatescript langts setup
import { reactive } from vue
import { VxeGridProps } from vxe-tableinterface RowVO {id: numbername: stringnickname: stringrole: stringsex: stringage: numberaddress: string
}const gridOptions reactiveVxeGridPropsRowVO({border: true,height: 300,align: null,columnConfig: {resizable: true},columns: [{ type: seq, width: 50 },{ field: name, title: name },{ field: sex, title: sex },{ field: address, title: Address }],toolbarConfig: {slots: {buttons: toolbar_buttons}},data: [{ id: 10001, name: Test1, nickname: T1, role: Develop, sex: Man, age: 28, address: Shenzhen },{ id: 10002, name: Test2, nickname: T2, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 10003, name: Test3, nickname: T3, role: PM, sex: Man, age: 32, address: Shanghai },{ id: 10004, name: Test4, nickname: T4, role: Designer, sex: Women, age: 23, address: Shenzhen },{ id: 10005, name: Test5, nickname: T5, role: Develop, sex: Women, age: 30, address: Shanghai },{ id: 10006, name: Test6, nickname: T6, role: Designer, sex: Women, age: 21, address: Shenzhen },{ id: 10007, name: Test7, nickname: T7, role: Test, sex: Man, age: 29, address: Shenzhen },{ id: 10008, name: Test8, nickname: T8, role: Develop, sex: Man, age: 35, address: Shenzhen }]
})
/script树形表格
templatedivvxe-toolbartemplate #buttonsvxe-button clickexpandAllEvent展开所有/vxe-buttonvxe-button clickclaseExpandEvent收起所有/vxe-button/template/vxe-toolbarvxe-tableshow-overflowheight400reftableRef:loadingloading:tree-config{transform: true}:scroll-y{enabled: true, gt: 20}:datatableDatavxe-column typeseq width200 tree-node/vxe-columnvxe-column fieldid titleId/vxe-columnvxe-column fieldname titleName/vxe-column/vxe-table/div
/templatescript langts setup
import { ref } from vue
import { VxeTableInstance } from vxe-tableinterface RowVO {id: numberparentId: number | nullname: string
}const tableRef refVxeTableInstanceRowVO()const loading ref(false)
const tableData refRowVO[]([])const loadList () {loading.value truefetch(/resource/json/provinces_list.json).then(res res.json()).then((data: RowVO[]) {tableData.value dataloading.value false})
}const expandAllEvent () {const $table tableRef.valueif ($table) {$table.setAllTreeExpand(true)}
}const claseExpandEvent () {const $table tableRef.valueif ($table) {$table.clearTreeExpand()}
}loadList()
/script全键盘操作 template vxe-toolbar :refresh{query: findList}template #buttonsvxe-buttontemplate #default新增操作/templatetemplate #dropdownsvxe-button typetext clickinsertEvent(null)从第一行插入/vxe-buttonvxe-button typetext clickinsertEvent(-1)从最后插入/vxe-buttonvxe-button typetext clickinsertEvent($refs.xTable.getData(100))插入到 100 行/vxe-buttonvxe-button typetext clickinsertEvent($refs.xTable.getData(400))插入到 400 行/vxe-button/template/vxe-buttonvxe-buttontemplate #default删除操作/templatetemplate #dropdownsvxe-button typetext click$refs.xTable.removeCheckboxRow()删除选中/vxe-buttonvxe-button typetext click$refs.xTable.remove($refs.xTable.getData(0))删除第一行/vxe-buttonvxe-button typetext click$refs.xTable.remove($refs.xTable.getData($refs.xTable.getData().length - 1))删除最后一行/vxe-buttonvxe-button typetext click$refs.xTable.remove($refs.xTable.getData(100))删除第 100 行/vxe-button/template/vxe-buttonvxe-buttontemplate #default校验操作/templatetemplate #dropdownsvxe-button typetext clickvalidEvent快速校验/vxe-buttonvxe-button typetext clickfullValidEvent完整快速校验/vxe-buttonvxe-button typetext clickselectValidEvent选中行校验/vxe-button/template/vxe-buttonvxe-button clickgetInsertEvent获取新增/vxe-buttonvxe-button clickgetRemoveEvent获取删除/vxe-buttonvxe-button clickgetUpdateEvent获取修改/vxe-buttonvxe-buttontemplate #default滚动操作/templatetemplate #dropdownsvxe-button typetext click$refs.xTable.scrollToRow($refs.xTable.getData(10))滚动到第 10 行/vxe-buttonvxe-button typetext click$refs.xTable.scrollToRow($refs.xTable.getData(400))滚动第 400 行/vxe-buttonvxe-button typetext click$refs.xTable.scrollToColumn($refs.xTable.getColumns(1))滚动第 1 列/vxe-buttonvxe-button typetext click$refs.xTable.scrollToColumn($refs.xTable.getColumns(10))滚动第 10 列/vxe-button/template/vxe-button/template/vxe-toolbarvxe-tablebordershow-overflowkeep-sourcerefxTableheight300:column-config{resizable: true}:loadingdemo1.loading:edit-rulesdemo1.validRules:mouse-config{selected: true}:edit-config{trigger: dblclick, mode: cell, showStatus: true}:keyboard-config{isArrow: true, isDel: true, isEnter: true, isTab: true, isEdit: true}vxe-column typecheckbox width60/vxe-columnvxe-column typeseq width100/vxe-columnvxe-column fieldname titleName sortable width200 :edit-render{autofocus: .vxe-input--inner}template #editscopevxe-input v-modelscope.row.name typetext change$refs.xTable.updateStatus(scope)/vxe-input/template/vxe-columnvxe-column fieldage titleAge width200 :edit-render{autofocus: .vxe-input--inner}template #editscopevxe-input v-modelscope.row.age typetext change$refs.xTable.updateStatus(scope)/vxe-input/template/vxe-columnvxe-column fieldsex titleSex width200 :edit-render{autofocus: .vxe-input--inner}template #editscopevxe-input v-modelscope.row.sex typetext change$refs.xTable.updateStatus(scope)/vxe-input/template/vxe-columnvxe-column fieldrate titleRate width200/vxe-columnvxe-column fieldregion titleRegion width200/vxe-columnvxe-column fieldtime titleTime width200/vxe-columnvxe-column fieldaddress titleAddress width300 show-overflow/vxe-columnvxe-column fieldupdateTime titleUpdateTime width200/vxe-columnvxe-column fieldcreateTime titleCreateTime width200/vxe-column/vxe-tablescript import { defineComponent, reactive, ref } from vueimport { VXETable, VxeTableInstance, VxeTablePropTypes } from vxe-tableexport default defineComponent({setup () {const xTable refVxeTableInstance()const demo1 reactive({loading: false,validRules: {name: [{ required: true, message: app.body.valid.rName },{ min: 3, max: 50, message: 名称长度在 3 到 50 个字符 }],sex: [{ required: true, message: 性别必须填写 }]} as VxeTablePropTypes.ValidConfig})const mockList (size: number) {const list: any[] []for (let index 0; index size; index) {list.push({checked: false,name: 名称${index},sex: 0,num: 123,age: 18,num2: 234,rate: 3,address: shenzhen})}return list}const findList () {demo1.loading truereturn new Promise(resolve {setTimeout(() {const tableData mockList(600)// 阻断 vue 对大数组的监听避免 vue 绑定大数据造成短暂的卡顿const $table xTable.valueif ($table) {$table.loadData(tableData)}resolve(null)demo1.loading false}, 300)})}const validEvent async () {const $table xTable.valueconst errMap await $table.validate()if (errMap) {VXETable.modal.message({ status: error, content: 校验不通过 })} else {VXETable.modal.message({ status: success, content: 校验成功 })}}const fullValidEvent async () {const $table xTable.valueconst errMap await $table.fullValidate()if (errMap) {const msgList: string[] []Object.values(errMap).forEach((errList) {errList.forEach(params {const { rowIndex, column, rules } paramsrules.forEach(rule {msgList.push(第 ${rowIndex 1} 行 ${column.title} 校验错误${rule.message})})})})VXETable.modal.message({status: error,slots: {default () {return [div classred stylemax-height: 400px;overflow: auto;{msgList.map(msg {return div{ msg }/div})}/div]}}})} else {VXETable.modal.message({ status: success, content: 校验成功 })}}const selectValidEvent async () {const $table xTable.valueconst selectRecords $table.getCheckboxRecords()if (selectRecords.length 0) {const errMap await $table.validate(selectRecords).catch(errMap errMap)if (errMap) {VXETable.modal.message({ status: error, content: 校验不通过 })} else {VXETable.modal.message({ status: success, content: 校验成功 })}} else {VXETable.modal.message({ status: warning, content: 未选中数据 })}}const insertEvent (row: any) {const $table xTable.valueconst record {checked: false}$table.insertAt(record, row).then(({ row }) {$table.setEditRow(row)})}const getInsertEvent () {const $table xTable.valueconst insertRecords $table.getInsertRecords()VXETable.modal.alert(insertRecords.length)}const getRemoveEvent () {const $table xTable.valueconst removeRecords $table.getRemoveRecords()VXETable.modal.alert(removeRecords.length)}const getUpdateEvent () {const $table xTable.valueconst updateRecords $table.getUpdateRecords()VXETable.modal.alert(updateRecords.length)}findList()return {xTable,demo1,findList,validEvent,fullValidEvent,selectValidEvent,insertEvent,getInsertEvent,getRemoveEvent,getUpdateEvent}}})后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
