简约大气的网站,平面设计软件下载官方网站,外贸流程案例,房地产新闻联播vxe-table 全键盘操作#xff0c;按键编辑方式设置#xff0c;覆盖方式与追加方式#xff1b; 通过 keyboard-config.editMode 设置按键编辑方式#xff1b;支持覆盖方式编辑和追加方式编辑
安装
npm install vxe-pc-ui4.3.15 vxe-table4.9.15// ...
import VxeUI from v…vxe-table 全键盘操作按键编辑方式设置覆盖方式与追加方式 通过 keyboard-config.editMode 设置按键编辑方式支持覆盖方式编辑和追加方式编辑
安装
npm install vxe-pc-ui4.3.15 vxe-table4.9.15// ...
import VxeUI from vxe-pc-ui
import vxe-pc-ui/lib/style.css
import VxeUITable from vxe-table
import vxe-table/lib/style.css
// ...createApp(App).use(VxeUI).use(VxeUITable).mount(#app)
// ...按键编辑方式 templatedivvxe-radio-group v-modelgridOptions.keyboardConfig.editModevxe-radio-button labelcoverage content覆盖式编辑/vxe-radio-buttonvxe-radio-button labelinsert content追加式编辑/vxe-radio-button/vxe-radio-groupvxe-grid v-bindgridOptions/vxe-grid/div
/templatescript setup
import { reactive } from vueconst gridOptions reactive({border: true,showOverflow: true,keepSource: true,height: 400,mouseConfig: {selected: true},keyboardConfig: {isEdit: true,isArrow: true,isEnter: true,isTab: true,isDel: true,isBack: true,isEsc: true,editMode: insert},editConfig: {trigger: dblclick,mode: cell,showStatus: true},columns: [{ type: seq, width: 70 },{ field: name, title: Name, editRender: { name: VxeInput } },{ field: sex, title: Sex, editRender: { name: VxeInput } },{ field: age, title: Age, editRender: { name: VxeInput } }],data: [{ id: 10001, name: Test1, role: Develop, sex: Man, age: 28, address: test abc },{ id: 10002, name: Test2, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 10003, name: Test3, role: PM, sex: Man, age: 32, address: Shanghai },{ id: 10004, name: Test4, role: Designer, sex: Women, age: 23, address: test abc },{ id: 10005, name: Test5, role: Develop, sex: Women, age: 30, address: Shanghai },{ id: 10006, name: Test6, role: Designer, sex: Women, age: 21, address: test abc },{ id: 10007, name: Test7, role: Test, sex: Man, age: 29, address: test abc },{ id: 10008, name: Test8, role: Develop, sex: Man, age: 35, address: test abc },{ id: 10009, name: Test9, role: Test, sex: Man, age: 26, address: test abc },{ id: 10010, name: Test10, role: Develop, sex: Man, age: 38, address: test abc },{ id: 10011, name: Test11, role: Test, sex: Women, age: 29, address: test abc },{ id: 10012, name: Test12, role: Develop, sex: Man, age: 27, address: test abc },{ id: 10013, name: Test13, role: Test, sex: Women, age: 24, address: test abc },{ id: 10014, name: Test14, role: Develop, sex: Man, age: 34, address: test abc },{ id: 10015, name: Test15, role: Test, sex: Man, age: 21, address: test abc },{ id: 10016, name: Test16, role: Develop, sex: Women, age: 20, address: test abc },{ id: 10017, name: Test17, role: Test, sex: Man, age: 31, address: test abc },{ id: 10018, name: Test18, role: Develop, sex: Women, age: 32, address: test abc },{ id: 10019, name: Test19, role: Test, sex: Man, age: 37, address: test abc },{ id: 10020, name: Test20, role: Develop, sex: Man, age: 41, address: test abc }]
})
/script单元格选取与按键编辑方式 templatedivvxe-radio-group v-modelgridOptions.keyboardConfig.editModevxe-radio-button labelcoverage content覆盖式编辑/vxe-radio-buttonvxe-radio-button labelinsert content追加式编辑/vxe-radio-button/vxe-radio-groupvxe-grid v-bindgridOptions/vxe-grid/div
/templatescript setup
import { reactive } from vueconst gridOptions reactive({border: true,height: 400,showOverflow: true,keepSource: true,columnConfig: {resizable: true},mouseConfig: {area: true // 是否开启区域选取},areaConfig: {multiple: true // 是否启用多区域选取功能},editConfig: {mode: cell,trigger: dblclick,showStatus: true},keyboardConfig: {isClip: true,isArrow: true,isShift: true,isTab: true,isEnter: true,isEdit: true,editMode: insert,isBack: true,isDel: true,isEsc: true,isFNR: true,isMerge: true // 是否开启单元格合并功能},columns: [{ type: seq, fixed: left, width: 60 },{ field: name, fixed: left, title: name, width: 200, editRender: { name: VxeInput } },{ field: role, title: Role, width: 200, editRender: { name: VxeInput } },{field: sex,title: sex,width: 250,editRender: {name: VxeSelect,options: [{ label: Man, value: 1 },{ label: Women, value: 0 }]}},{ field: num1, title: Num1, width: 200, editRender: { name: VxeInput } },{ field: num2, title: Num2, width: 250, editRender: { name: VxeInput } },{ field: num3, title: Num3, width: 300, editRender: { name: VxeInput } },{ field: age, title: age, fixed: right, width: 100, editRender: { name: VxeInput } },{ field: address, title: Address, fixed: right, width: 300, editRender: { name: VxeInput } }],data: [{ id: 10001, name: Test1, role: Develop, sex: 1, num1: 12, num2: 21, num3: 78, age: 28, address: Shengzhen },{ id: 10002, name: Test2, role: Test, sex: 0, num1: 23, num2: 45, num3: 23, age: 22, address: Guangzhou },{ id: 10003, name: Test3, role: PM, sex: 1, num1: 23, num2: 12, num3: 68, age: 32, address: Shanghai },{ id: 10004, name: Test4, role: Designer, sex: 0, num1: 23, num2: 23, num3: 47, age: 24, address: Shanghai },{ id: 10005, name: Test5, role: Designer, sex: 0, num1: 32, num2: 77, num3: 65, age: 42, address: Guangzhou },{ id: 10006, name: Test6, role: Designer, sex: 1, num1: 39, num2: 66, num3: 87, age: 38, address: Shengzhen },{ id: 10007, name: Test7, role: Test, sex: 0, num1: 23, num2: 44, num3: 23, age: 24, address: Shengzhen },{ id: 10008, name: Test8, role: PM, sex: 1, num1: 23, num2: 23, num3: 87, age: 34, address: Shanghai },{ id: 10009, name: Test9, role: Designer, sex: 1, num1: 91, num2: 23, num3: 24, age: 52, address: Shanghai },{ id: 10010, name: Test10, role: Test, sex: 0, num1: 20, num2: 72, num3: 54, age: 44, address: Guangzhou },{ id: 10011, name: Test11, role: Designer, sex: 1, num1: 56, num2: 32, num3: 63, age: 52, address: Shanghai },{ id: 10012, name: Test12, role: Test, sex: 0, num1: 34, num2: 65, num3: 54, age: 47, address: Guangzhou },{ id: 10013, name: Test13, role: Test, sex: 0, num1: 39, num2: 65, num3: 435, age: 47, address: Guangzhou },{ id: 10014, name: Test14, role: Test, sex: 0, num1: 44, num2: 65, num3: 324, age: 45, address: Guangzhou },{ id: 10015, name: Test15, role: Test, sex: 0, num1: 45, num2: 56, num3: 54, age: 39, address: Guangzhou },{ id: 10016, name: Test16, role: Test, sex: 0, num1: 34, num2: 65, num3: 344, age: 44, address: Shanghai },{ id: 10017, name: Test17, role: Test, sex: 0, num1: 78, num2: 77, num3: 78, age: 48, address: Guangzhou },{ id: 10018, name: Test18, role: Test, sex: 0, num1: 32, num2: 12, num3: 45, age: 89, address: Shanghai },{ id: 10019, name: Test19, role: Test, sex: 0, num1: 42, num2: 65, num3: 8, age: 52, address: Guangzhou },{ id: 10020, name: Test20, role: Test, sex: 0, num1: 56, num2: 45, num3: 4, age: 41, address: Shanghai },{ id: 10021, name: Test21, role: Test, sex: 1, num1: 48, num2: 65, num3: 54, age: 49, address: Guangzhou },{ id: 10022, name: Test22, role: Test, sex: 0, num1: 41, num2: 65, num3: 12, age: 50, address: Shanghai }]
})
/scripthttps://gitee.com/x-extends/vxe-table
