简介
操作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切换的都切换一遍
