南宁网络营销网站,网站配色案例,免费空间自带域名,wordpress 裁剪需求#xff1a; vxe-table表格 1、新增的时候#xff0c;vxe-table第一行的第一个输入框聚焦 2、输入完成后#xff0c;按回车#xff0c;自动跳到同一行的下一个输入框 3、当在同一行的最后一个输入框输入完成后#xff0c;按回车跳回第一个输入框并选中状态且复选框为选…需求 vxe-table表格 1、新增的时候vxe-table第一行的第一个输入框聚焦 2、输入完成后按回车自动跳到同一行的下一个输入框 3、当在同一行的最后一个输入框输入完成后按回车跳回第一个输入框并选中状态且复选框为选中状态 4、点新增滚动条过长遮挡住第一列的话要向左滚动到最开始的位置 5、表格中有两种下拉框原生的lel-select及封装后的select组件面板打开时的上下移动及回车赋值和直接点击赋值后要聚焦 6、表格中有封装的组件输入框el-table输入值的时候显示el-table使用的el-popover,实现类似于el-selelct下拉框面板的效果增加了svg图标点击打开弹窗弹窗双击行或单击后点确定赋值之后输入框要聚焦
需求优化 花了两天的时间
踩过的坑 1、el-select选择框面板打开点击选值后回车向右跳转后el-seelct依然打开面板问题 2、列表同一行任意位置开始按回车键触发不了回车事件 3、回车事件中获取不到自定义属性问题 4、列表同一行最后一列回车时跳到第一列中聚焦 且选中状态 5、列表横向过长出现滚动条时新增滚动条如何回到第一列且聚焦 6、回车向右跳到下一输入框聚焦时滚动条遮挡导致下一输入框显示不全滚动条如何滑至最右侧 7、vxe-table复选框如何手动选中且保持原有的勾选效果
实现思路;
1、在utils文件夹下定义一个js文件全局注册后给输入框下拉框等编辑组件绑定回车事件 2、给所有列表Dom元素添加自定义索引
备注示例代码只保留了和功能相关的代码
1、父页面中vxe-table封装成子组件 vxeTablerefvxeTableRef :columnscolumns:data-sourcelistselectAllEventselectAllEventgetListgetList addRowaddRowhandleDelListhandleDelList:formDataformData:enterFlag.syncenterFlag/vxeTable
//新增
handleAddList(){
this.list.unshift({id: this.uuid(),money: 0,cash: 0,checked:false})this.list.forEach(item{item.checked false})this.dealFirstInput()
},dealFirstInput(index, flag) {this.$nextTick(() {// vxe-body--row从1开始let lastIndexif (flag up) {lastIndex index 1} else if (flag down) {lastIndex index 2}// 增加下行if (index0flag) {// 获取第一个输入框元素const lastElement .vxe-table--body-wrapper .vxe-table--body .vxe-body--row:nth-child(${lastIndex}) .vxe-body--column:nth-child(3) .el-input__innerconst tolastInput this.$refs.vxeTableRef.$refs.vxeTable.$el.querySelector(lastElement)// // 聚焦第一个输入框tolastInput.focus()} else {// 新增和增加上行// 获取第一个输入框元素const firstInput this.$refs.vxeTableRef.$refs.vxeTable.$el.querySelector(.vxe-table--body-wrapper .vxe-table--body .vxe-body--row:nth-child(1) .vxe-body--column:nth-child(3) .el-input__inner)// // 聚焦第一个输入框firstInput.focus()}this.enterFlag true})},//列表操作列增加上行增加下行addRow(row, index, key) {const newObj { money: 0, cash: 0, id: this.uuid() }if (index 0) {this.enterFlag !this.enterFlagif (key previous) {this.list.splice(index, 0, newObj)this.dealFirstInput(index, up)return}this.list.splice(index 1, 0, newObj)this.dealFirstInput(index, down)}}2、子组件vxe-table内部 el-form :modelform refform :rulesrules :show-messagefalsevxe-table refvxeTableclassmytable-scrollbar:row-config{ height: 36 }borderscrollhandleScrollshow-overflowresizablecheckbox-allselectAllEventcheckbox-changeselectAllEvent:footer-methodfooterMethod:datalist:column-config{ resizable: true }resizable-changeresizableChange:checkbox-config{ checkAll: true }vxe-column typecheckbox width60 fixedleft :header-aligncenter :aligncenter :resizablefalse/vxe-columntemplate v-forconfig in newColumnsvxe-column:keyconfig.field:widthconfig.width:fieldconfig.field:visibleconfig.visible:header-aligncenter :aligncenter:fixedconfig.freeze true ? left : :min-widthconfig.field:resizabletruetemplate #default{ row, $rowIndex, $columnIndex } v-ifconfig.field xxxel-form-item :proplist. $rowIndex .notes :rulesrules.xxxel-inputrefinputv-modelrow.xxxkeyup.enter.native$event tableKeydown($event, $rowIndex, $columnIndex) clearable/el-input/el-form-item/templatetemplate #default{ row, $rowIndex, $columnIndex } v-else-ifconfig.field xxxel-select:refselect $columnIndex input $rowIndexv-modelrow.xxxkeyup.enter.native$event tableKeydown($event, $rowIndex, $columnIndex)clearablefilterable:disabledisEnabledel-option v-foritem in deptOption :keyitem.deptId :valueitem.deptId :labelitem.deptName/el-option/el-select/template/vxe-column/vxe-table/el-form props: {enterFlag: {type: Boolean,default: false,},}watch:{enterFlag: {handler(newVal) {if (newVal true) {this.getAllInput()}},deep: true,},
}// 滚动事件getAllInput() {setTimeout(() {this.$nextTick(() {this.$refs.vxeTable.scrollTo(0)})}, 500)},最重要的是js
export function tableKeydown(e, rowIndex, columnIndex) {//事件对象兼容let ev e || window.event || arguments.callee.caller.arguments[0]//通过ev 获取 当前input 名称 用于判断属于哪列let className ev.target.offsetParent.className//获取所有inputlet inputAll document.querySelectorAll(.mytable-scrollbar .el-input__inner)//获取所有索引组成的数组const inputIndexs []for (var i 0; i inputAll.length; i) {inputIndexs.push(i)}//按索引增加自定义属性,这里遇到的坑是js中之前已经增加过自定义属性代码复制过来的时候没有改导致一直查找不到我现在增的//自定义属性customFocusIndex一定要保证自定义属性的唯一性for (var i 0; i inputIndexs.length; i) {inputAll[i].setAttribute(customFocusIndex, inputIndexs[i])}let attrIndex parseInt(ev.target.getAttribute(customFocusIndex))// ev.keyCode 13代表按下的是回车向上键33向下键34if (ev ev.keyCode 13) {//每次回车1下一个输入框的索引attrIndex 1//如果遇到禁用列多加一次索引for (var i attrIndex; i inputAll.length; i) {if (inputAll[i] inputAll[i].disabled) {attrIndex 1} else {break}}//一行一共有多少列这里写死了const rowline rowIndex * 12
//第10列之后都是禁用列这里也写死了第10列代表最后一列if (columnIndex 10) {// 最后一列跳转到第一列inputAll[rowline].focus()inputAll[rowline].select()//调用scrollTo方法手动将滚动条滚动到第一列setTimeout(() {this.$nextTick(() {this.$refs.vxeTable.scrollTo(0)})}, 500)//最后一列调整到第一列的时候要手动选中复选框使用setCheckboxRow方法const vxeTable this.$refs.vxeTableconst data this.$refs.vxeTable.getData()vxeTable.setCheckboxRow(data[rowIndex],true)this.$refs.vxeTable.loadData(data)// 下拉框点击选择下拉框比输入框多一个类名is-focus通过此区分if (className.indexOf(is-focus) ! -1) {//动态获取el-select的实例防止重复行索引列索引都拼接上了let DictselectRef select columnIndex input rowIndex//封装的el-select组件有两层ref根据自己定义的refif (this.$refs[DictselectRef][0].$refs.selectRef) {// dictSelectthis.$refs[DictselectRef][0].$refs.selectRef.visible falsethis.$refs[DictselectRef][0].$refs.selectRef.blur()this.$refs[DictselectRef][0].$refs.selectRef.$refs.reference.$refs.input.hidden true} else {// el-select 原生el-selectthis.$refs[DictselectRef].visible falsethis.$refs[DictselectRef][0].blur()this.$refs[DictselectRef][0].$refs.reference.$refs.input.hidden true}}return}if (className.indexOf(el-input--suffix) ! -1) {// 下拉框点击选择if (className.indexOf(is-focus) ! -1) {let DictselectRef select columnIndex input rowIndexif (this.$refs[DictselectRef][0].$refs.selectRef) {// dictSelectthis.$refs[DictselectRef][0].$refs.selectRef.visible falsethis.$refs[DictselectRef][0].$refs.selectRef.blur()this.$refs[DictselectRef][0].$refs.selectRef.$refs.reference.$refs.input.hidden true} else {// el-selectthis.$refs[DictselectRef].visible falsethis.$refs[DictselectRef][0].blur()this.$refs[DictselectRef][0].$refs.reference.$refs.input.hidden true}}//当第8列回车的时候会因为滚动条遮挡看不见第九列是否光标已进入所以加了滚动条向右滚动事件if (columnIndex 8) { let scrollLeft this.$refs.vxeTable.$el.scrollWidthsetTimeout(() {this.$nextTick(() {this.$refs.vxeTable.scrollTo(scrollLeft)})}, 500)}if (inputAll[attrIndex]) {inputAll[attrIndex].focus()}}}
}
