简介

操作 element-ui 的 el-table 时，想要快速tab切换光标到指定的列的输入框中，而不是把一行有聚焦的都tab切换选中一遍（如有el-button时，按tab切换也会切换到它上面去）。
并且鼠标单击输入框时，自动全选内容。

要用到的功能点：

1.自定义单元列的内容：

由于本功能需要行的索引，所以使用了slot-scope="scope"// 1. slot-scope="scope"  （此处scope是表格的行属性）
<template slot-scope="scope"></template>// 2.  #default="{row}"  （此处row类似scope.row）
<template #default="{row}"></template>

2.获取行的数据：scope.row.属性

<template slot-scope="scope">{{scope.row.id}}</template>

3.获取单元行的索引：scope.$index

<template slot-scope="scope">{{scope.$index}}</template>

具体实现

<template><div class="object-type-data-list-box"><div class="object-type-data-list-table"><el-table :data="tableData" height="100%" border stripe><el-table-column prop="url" label="缩略图" width="125"><template slot-scope="scope"><el-image class="table-row-image" :lazy="true" :src="scope.row.url" fit="contain"></el-image></template></el-table-column><el-table-column prop="code" label="code" width="100"> </el-table-column><el-table-column prop="title0" label="中文"><template slot-scope="scope"><input:ref="'table' + scope.$index + 'title0'"v-model="scope.row.title0"type="text"maxlength="300"@keydown="tableRowInputKeyup($event, scope.$index, 'title0')"@focus="selectTableRowInputFun('table' + scope.$index + 'title0')"/></template></el-table-column><el-table-column prop="title1" label="繁体"><template slot-scope="scope"><input:ref="'table' + scope.$index + 'title1'"v-model="scope.row.title1"type="text"maxlength="300"@keydown="tableRowInputKeyup($event, scope.$index, 'title1')"@focus="selectTableRowInputFun('table' + scope.$index + 'title1')"/></template></el-table-column><el-table-column prop="title2" label="英文"><template slot-scope="scope"><input:ref="'table' + scope.$index + 'title2'"v-model="scope.row.title2"type="text"maxlength="300"@keydown="tableRowInputKeyup($event, scope.$index, 'title2')"@focus="selectTableRowInputFun('table' + scope.$index + 'title2')"/></template>></el-table-column><el-table-column label="操作" width="80"><template #default="{row}"><el-button type="primary" size="mini" @click="toObjectItemDetail(row)">详情</el-button></template></el-table-column></el-table></div></div>
</template><script>
export default {data() {return {defaultImg: require('@/core/components/image/common/failToLoadTwo.png'), // 默认图片thumbnail: {title0: '缩略图',title1: '缩略图',title2: 'Thumbnail'},tableData: []}},created() {this.initDataFun() // 初始化数据},methods: {// 初始化数据initDataFun() {this.tableData = [{id: 1,url: this.defaultImg,code: 11,title0: '王小虎1',title1: '王小虎1',title2: 'wangxiaohu1'},{id: 2,url: this.defaultImg,code: 12,title0: '王小虎2',title1: '王小虎2',title2: 'wangxiaohu2'},{id: 3,url: this.defaultImg,code: 13,title0: '王小虎3',title1: '王小虎3',title2: 'wangxiaohu3'}]},// 操作：光标点击了某个input框时，自动全选内容selectTableRowInputFun(refName) {// 传入当前点击input框的自定义拼接的ref名，方便寻找dom if (this.$refs[refName]) {this.$refs[refName].select()}},// 键盘事件tableRowInputKeyup(e, index, titleName) {if (e.code === 'Tab') {e.preventDefault()let refName = ''switch (e.code) {case 'Tab':if (titleName === 'title0') {refName = 'table' + index + 'title1'}if (titleName === 'title1') {refName = 'table' + index + 'title2'}if (titleName === 'title2') {refName = 'table' + (index + 1) + 'title0'}breakdefault:break}if (this.$refs[refName]) {// 下一个input的dom存在，就切换到该domthis.$refs[refName].focus()this.$refs[refName].select()} else if (index && index === (this.tableData.length - 1)) {// 索引存在，但是已经是最后一个了，则又跳转到第一个input的Dom去refName = 'table' + 0 + 'title0'this.$refs[refName].focus()this.$refs[refName].select()}}},// 操作：详情toObjectItemDetail(row) {console.log(row)}}
}
</script><style lang="less" scoped>
.object-type-data-list-box {position: fixed;top: 100px;left: 100px;right: 100px;bottom: 100px;background-color: #fff;border: 1px solid #000;padding: 12px 12px;.object-type-data-list-table {height: calc(100vh - 200px - 24px);.table-row-image {width: 100px;height: 100px;display: flex;border-radius: 4px;border: 1px dashed #f1f1f1;}input {border: 1px solid #f1f1f1;outline: none;width: 100%;height: 40px;background-color: #fff;}}
}
</style>

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！

VUE：使用element-ui的el-table时，自定义单元格内容，并tab快速切换指定编辑的单元格，而不是把所有能tab切换的都切换一遍相关推荐

vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
【vue】element ui的el-input 输入框不能输入值
前言在使用element ui的el-input 输入框时,无法输入内容,后来发现是因为没有给input绑定值(v-model) 原因 Input 为受控组件,它总会显示 Vue 绑定值.(所以必须 ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
element ui 使用container布局时，容器布满全屏
element ui 使用container布局时,容器布满全屏在使用element ui 布局时,容器一直不能不满全局.在网上搜索了下.解决方法如下: 将包裹container的容器加入一下样式: ...
element ui使用折叠面板时产生的问题
1.失焦问题 element ui使用折叠面板时莫名其妙字变蓝错误情况如图所示一开始觉得是哪里的样式穿透问题,后来发现是失焦问题,既然知道是什么问题了,那就简单了发现不展开条数的要用下述代码才 ...

VUE：使用element-ui的el-table时，自定义单元格内容，并tab快速切换指定编辑的单元格，而不是把所有能tab切换的都切换一遍

简介

要用到的功能点：

具体实现

最后

VUE：使用element-ui的el-table时，自定义单元格内容，并tab快速切换指定编辑的单元格，而不是把所有能tab切换的都切换一遍相关推荐

最新文章

热门文章