写在前面的话
想直接看代码的朋友可以省略下面的历程直接翻到最底下，我把完整示例代码放在最下面
引子
笔者最近在做项目中遇到了一件事，某个迭代我们需要对项目进行UI改造，特别是把当前正在使用的一个可编辑表格换一下UI。说是换UI，其实是换表格，因为当前在用的表格组件是项目组花钱买的，但老板应该是对这个组件的UI有别的想法（其实就是觉得丑），然后经过老大的决定，我们需要换成Element-UI的组件（Element打钱~~ ）。
虽说组件要换，但是我们要尽可能的保留原先的功能，原来的组件，在使用上面非常贴近于Excel表格。然后，笔者开始库库干了。。。
初步实现
为了快速实现功能，我们首先选择的是把这个可编辑表格的所有编辑项全部展示出来，这样用户就可以直接进行表格的编辑，就像这样：
但很快，我们就发现了第一个问题。
我们的表格中，有两列下拉框使用了远端搜索功能，同时使用了一个封装的下拉选择组件。这就使得当下拉框有值的时候，它会尝试用value在下拉选项中去匹配对应的label，而下拉选项需要通过远端搜索即调接口获取。这两列调的是同一个接口，哪怕这里做了分页并且默认一页10条，仍然默认会调同一个接口20次，这是一个很影响性能的问题，如果切换成一页20条、30条、50条的话，后果不堪设想。。。
考虑到这种情况，我们首先采取的方法是只调一次接口，把选项数据全部拉回来本地，然后让使用这些选项的下拉框直接引用。但在这里，我们又发现，这些下拉框是这样的：
是的，label和value同时展示出来，而且在远程搜索中，可以搜索label或value来找对应项。
那这里我们就得使用filter-method自定义搜索方法咯，但这里有个问题，那就是搜索结果得要是独立的才行，即：第一次搜索的选项结果，不能出现在第二次的搜索选项里，意思就是每次搜索完，需要把选项还原到默认状态。这好办，visible-change事件可以实现。
当我们把实现的功能交付出去后，产品给我们带来了一个噩耗：用户非得要跟Excel一样的，也就是说为了满足用户的使用习惯，我们需要尽可能还原出原来的表格组件来
解决之道
第一步
事已至此，先吃饭吧，啊，不是，先百度吧
在某次冲浪中，我发现了一篇文章，里面提到使用el-table组件的cell-dblclick事件来实现双击进入编辑状态的做法，也就是下面这样：
通过列的prop和行的id一起来定位到双击选中的单元格的位置，然后通过v-if使得输入框渲染出来
<template>
<el-table
:data="tableData"
style="width: 100%"
@cell-dblclick="cellDblclick"
>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-input v-if="formViewMethod(scope)" v-model="scope.row.name"></el-input>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
editColumnProp: null,
editRowId: null
}
},
methods: {
cellDblclick(row, column, cell) {
cell.style.background = 'pink'
this.editColumnProp = column.property
this.editRowId = row.id
},
formViewMethod(scope) {
const { row, column } = scope
return (
row.id === this.editRowId &&
this.editColumnProp === column.property
)
}
}
}
</script>
这方法确实可行！在默认是text的情况下，也就不会去调接口，这样，哪怕是用回远端搜索功能，也能保证对性能没有那种压力。
第一步走出了，另一个问题就摆在眼前了：当我点击编辑框以外的地方，该怎么让它恢复默认那种文本状态呢？文章的作者并没有给出答案，那就得自己去寻找了
新的曙光
最近在冲浪中，我了解到有一个名为ClickOutside的指令，这是一个vue3中的自定义指令，顾名思义，就是点击外面的意思。这下子灵感就来了：在cell-dblclick事件中，我们可以获取到当前单元格的dom，那如果我们在获取dom的时候，给它加上一个点击事件，当点击到外面的时候，就清空当前单元格的选中状态，那是不是就可以实现了呢？说干就干，上代码：
cellDblclick(row, column, cell) {
cell.style.background = 'pink'
cell.__clickOutside__ = (e) => {
if (cell.contains(e.target)) {
return console.log('点击了自己')
}
console.log('点击了外面')
cell.__clickOutside__ && document.removeEventListener('click', cell.__clickOutside__)
}
document.addEventListener('click', cell.__clickOutside__)
this.editColumnProp = column.property
this.editRowId = row.id
}
在这里我们使用了dom的contains()方法，这个方法用于检测一个元素是否包含另一个元素，返回的是一个布尔值。也就是当点击的时候，判断被点击元素B是否在双击的时候绑定点击事件的元素A之内，如果返回true的话，就是点击自己了，否则就是点击外面，这样就能实现清空选中状态的方法了。就像下面这样子：
到这里，可编辑表格的功能就算实现了，谢谢大家观看，下面会贴上完整的示例代码，大伙儿可以直接复制粘贴来看看效果。
完整代码
<template>
<div class="irregular-table-container">
<div class="custom-table">
<!-- 表格区域 -->
<el-table
:data="tableData"
style="width: 100%"
@cell-dblclick="cellDblclick"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<el-input v-if="formViewMethod(scope)" v-model="scope.row.name"></el-input>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="gender"
label="性别"
width="120"
:formatter="formatGender"
>
</el-table-column>
<el-table-column
prop="city"
label="城市"
width="200"
:formatter="formatCity"
>
</el-table-column>
<el-table-column prop="address" label="地址"/>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "EditableTable",
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
gender: '男',
city: 'Beijing',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
gender: '男',
city: 'Nanjing',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
gender: '男',
city: 'Guangzhou',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
gender: '男',
city: 'Shanghai',
address: '上海市普陀区金沙江路 1516 弄'
}
],
options: [
{ label: '男', value: 1 },
{ label: '女', value: 0 }
],
cities: [
{
value: 'Beijing',
label: '北京'
}, {
value: 'Shanghai',
label: '上海'
}, {
value: 'Nanjing',
label: '南京'
}, {
value: 'Chengdu',
label: '成都'
}, {
value: 'Shenzhen',
label: '深圳'
}, {
value: 'Guangzhou',
label: '广州'
}
],
editColumnProp: null,
editRowId: null
}
},
computed: {},
created() {},
methods: {
formatName(row) {
const input = (
<el-input v-model={row.name} clearable />
)
return input
},
formatGender(row) {
const select = (
<el-select v-model={row.gender}>
{this.options.map(item => {
return (
<el-option
key={item.value}
label={item.label}
value={item.value}
/>
)
})}
</el-select>
)
return select
},
formatCity(row) {
const select = (
<el-select v-model={row.city}>
{this.cities.map(item => {
return (
<el-option
key={item.value}
label={item.label}
value={item.value}
>
<span style="float: left">{ item.label }</span>
<span style="float: right; color: #8492a6; font-size: 13px">{ item.value }</span>
</el-option>
)
})}
</el-select>
)
return select
},
cellDblclick(row, column, cell) {
cell.style.background = 'pink'
cell.__clickOutside__ = (e) => {
if (cell.contains(e.target)) {
return console.log('点击了自己')
}
// console.log('点击了外面')
this.editColumnProp = null
this.editRowId = null
cell.__clickOutside__ && document.removeEventListener('click', cell.__clickOutside__)
}
document.addEventListener('click', cell.__clickOutside__)
this.editColumnProp = column.property
this.editRowId = row.id
},
formViewMethod(scope) {
const { row, column } = scope
return (
row.id === this.editRowId &&
this.editColumnProp === column.property
)
}
}
}
</script>
感谢名单
写完一看时间，嚯，好家伙，凌晨4点了，赶紧碎觉，狗命要紧~~
最后的最后，这里要感谢两位给我提供灵感和思路的大大，我把他们的文章链接放到下面了，感兴趣的小伙伴可以过去学习下。
vue对el-table的二次封装，双击单元格编辑，避免表格输入框过多卡顿
vue自定义指令（v-clickoutside）-点击当前区域之外的位置
