巧妙使用Vue讲义

问题描述

有一个简单的表格，产品要求实现双击可编辑

看了一下网上的帖子，大多数都是搞两部分dom,-块是输入框，用于编辑状态填写；另

啾是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再力口上一个flag标识搭配v-if

和一eke去控制编辑状态、还是显示状态。大致代码如下：

<el-table-column.

aligi^=ucenter"

姓名”

>

<tew\plateslat-scope="scope”》

b-isC/ick就是标识状态，状态处于编辑时候，显示输入框，状态属于呈现状态就显示文本内容

-->

<el-ik\putv-if="scope.-ow.isCHck"—wxode/=“scope.row.eahe”

^blur=l,blurFia(scope.K-owy,></el-iiaput>

<spa八@click="dickCeH(scopeYow)“v-eke>{{sc0pe.Hows〃&e}}</sp〃八〉

</tei^plate>

</el-table-column>

这种方式有其适用场景9但是得每个el-table-colunan.列中都加上el-ii^put和span以及v-if

和一eke。我们尝试一下动态添加el-input,就是点击那个单元格，给那个单元格

添加el-input让其处于可编辑状态，然后适时移除即可。这样的话，很多列的时

候，就不用加很多个v-if和v-else啦。我们先看一下效果图

效果图

序号姓名年龄家乡

1孙悟空500花果山水帘洞

2猪八戒88反।老庄

3沙和尚1000通天河

代码思路

•第1步：给el-table绑定双击事件比“ck二以匕3W,再双击事件的回调函数

中，可以得知点击的是哪一行、那一列、那个单元格dom,以及点击事件

colu^cell,这个是饿了么官方提供的，没啥好说的

第2步：重点来喽

o第2.1步：单元格双击事件以后，我们首先创建一个el-input标签，然后把

点击的这个单元格的值，作为参数props让这个el-input接收，这样的话

el-input就会显示这个单元格的值了，就可以编辑了。问题一：如何创建一个

R-input标签？,客官稍等，下方会解答

o第2.2步：把创建好的el-input标签替换掉原来的单元格span标签，这样的

话，就可以看到单元格变成了可输入的输入框了。问题二：如何把新创建的

H-Mput标签，替换原有的平“八标签，客官稍等，下方会解答

o第2.3步，当用户编辑完了点击别处时候，即输入框失去焦点的时候，再把

el-input输入框标签移除掉，恢复默认的span标签（当然失去焦点的时候,

就要发请求修改数据了)问题三：如何移除标签，并恢复原有的印标

签，客官稍等，下方会解答

・这样的话，每次双击搞一个input标签用于修改，每次改完了失去焦点，就恢复默

认单元格展示状态了，功能就实现了

代码思路中的三个问题解答

问题一：如何创建一个el-input标签？

我们知道，如果是创建原生的input标签并指定一个值，比较简单，直接：

letii^put=docui^eiat.createElei^^t(,mput,)//创建一个心标签

iiaput.value='孙悟空'//给iiaput标签赋值

docui^ei^t.body.appeiadCki(d(iiaput)//把ii^put标签追加到文档body中

不过el-input标签不能通过上述方式创建，因为document.createElement。方法虽

然可以创建出来el-input标签，但是dom并不认识这个el-input标签，所以页面

没有变化。毕竟饿了么的el-input也是把input标签做一个二次封装的

所以，这里我们可以使用Vue.exten40方法去继承一个组件并暴露出去，而继承的这个组件中又有一个

input标签，所以那个需要使用，那里就可以引入并new出来一个M-input了。关于Vue.extend()

的定义啥的，这里不赘述，详情看官方文档。笔者之前也写过一篇Vue.extend

文章，传送门：https://segmentfault.eom/a/ll...

首先搞一个.vue文件，用于继承

//mputvue文件

<te^plate>

<div4ass="ce〃"》

<el-ik\put

ref=,,elli^putReP,

size='Wni"

v-i^odel.trii^-"cellVa(iAe"

</div>

“template〉

props：(

cellValue：(

type:Swing|Number,

default：11,1j

)>

)

然后定义一个data.js文件，继承input.vue文件，并暴露

//datajs

importVuefrom"vue";

//sxe继承这个/Mp戊组件，就相当于一个构造函数了

constimpute=Vue.extc八d(4efi八edMput);

//暴露出去，哪里需要哪里引入

exportdefault{

ii^piAtC,

}

页面中引入并使用

//page.vue

importextei^dCoi^poM^tsfrom"./th^eC/data";//工.弓I入

八cwexteiadCoi^poM^.t^ii^putC({//2.实例化

propsData:{

//使用p「opsD圮〃对象传递参数，子组件在p-ops中可以接收到

cellValae:ceUVabe"/传递单元格的值

b

})4i^,oui^t(cell.cki(drei^[0]);//3.挂载

propsData对象用于给继承的组件传递参数，也可以传递一个函数，

从而继承组件通过这个函数通知外部使用组件，详情见后续完整代

码

问题二三：el-input标签和span标签的来回替换恢复

使用于Mount方法去做来回替换，机xount可以把一个子dom元素追加到父dom元

素内部，相当于叩加八dQv7d

然后这里需要有一个替换的时机，就是实例化的组件中的el-input失去焦点的时

候，去通知外部使用的组件，所以可以在外部使用是，在propsData中传递一个

函数到继承的组件，如：

//外部组件传递

MWexteiadCoi^poM^ts.ii^putC({

propsData：{

cellValue：cellValae,//传递单元格的值

saveRowPata：thissavcRowData,//传递回调函数用于通知，继承组件中可以触发之

})4^ount(cell.childiren[0]);

sa\/eR.o\A/Pata(parai^s){

c。八so/c./og(收到继承组件消息通知啦参数为：IpnRkns)

)

//内部组件失去焦点时候通知

<el-iiaput

二3【八pixtReF

size=〃Mini"

v-mo^ettnm=,,ce/fVafue/,

@勿〃匕=〃"urF八"

props：(

cellValue:{

type:String|A/umfeer,

default:""j

)>

saveRo\A/l^ata:Fu^ctioi^,//外部，传递进来一个函数，当这个H-i八/九(土失去焦点的时候，通过

此函数通知外部

)

blurFia(){

//失去焦点，再抛出去，通知外部

物MsweRowD4仅({

cellValue：this.cellValue,

//其他参数

1)；

)>

所以当内层失去焦点的时候，就可以通知外层去做一个替换了，就是把单元格

dom重新做一个于挂载，就把el-input替换成了span了，为了进一步理解，

这里的span我们也可以使用继承的方式，是new实例化使用，详情见下方完整

代码

完整代码

目录结构

协weC

--data.js

——i^put.vue

--spanvue

协％evtxc

用于继承的el-input组件

input.vue

<template>

<divc/ass=

<el-iiaput

ref^ellnputReP1

size="Mi八i"

v-^odel.tni^=,,ce>llVa(ue"

@切〃哼叱山KF八"

〈/div〉

</tei^plate>

<script>

exportdefault(

props:{

cellValue：{

type:SWicg|Number,

default:1,11j

)>

saveRowData：Fui^ctioia,//外部，传递进来一个函数，当这个H-i*〃土失去焦点的时候，通过

此函数通知外部

cef/Pom：Node,//单元格dom

row:Object,//单元格所在行数据

property:SWing,//单元格的key

L

i^v\ouiatedQ(

//用户双击后，让其处于获取焦点的状态

tkis.$Fefs.dlcpbitRef.focus。;

上

methods：(

blurFi^O{

//失去焦点，再抛出去，通知外部

thissaveR.o\A/U>ata({

cellValue:this.cellValuCj

ce〃Do3：tkis.cellDoM,

row:tkis.row,

property：pertg,

1)；

}，

)>

</script>

<style>

.cell(

width：20。%;

height:200%;

display：flex;

justify-content：center;

alig八-iteMS：center;

box-sizing：border-box；

padding:O8px;

)

</style>

用于继承的span组件

span.vue

<tei^plate>

class二忆c"〃>{{cellValueJ}</span>

〈/template〉

<script>

exportdefault{

props：(

cellValue：(

type：String|AJumfeer,

default:

｝，

｝，

</scnpt>

统一继承并暴露data,js文件

importVuefrom

importdefiMdl^.putFKOHA"./inputvue";

importdefi八edSpa八from"./sp久八vue”;

constimpute=Vuc.exte八八cd以p〃±);

constspai^C=Vue.extc八d(4efMedSpa八);

exportdefault(

imputej

spaiaCj

}

使用继承的three.vue组件

<tew\plate>

<divid-'app">

<d-table

^cell-dblclick^dblclick"

.cell-class-八〃he=〃ce"CSssN〃3c”

height-"4SO"

：data-utabledata11

border

>

<el-table.-colui^^〃@八二〃ce八tcdtgpc="inWex“Sbe/="序号"widtk-,,SO,l>

</el-table-cofumn>

<el-table-co/umn.alig^"center"prop二〃八“Kae"仁"姓名"wi4th=〃1O。”〉

</el-table-co/uwm>

<e(-table-colui^^alig^'cei^ter"prop="age"Sbe(二"年龄"width="工。。〃>

</el-table-cofumn>

<el-table-columnalig^"cei^ter"?匕。？="人。鹏0〃/aSR="家乡”》

</e(-table-cofumn>

</el-tab(e>

</div>

</tei^p(ate>

<script>

//引入继承组件对象，可取其身上的LpixtC构造函数、或卯〃八。构造函数生成组件

importextei^dCo^poMiatsfromu./threeC/data";

exportdefault{

data(){

return{

tableData：［

（

八”30：〃孙悟空"，

age：SOO,

ko-e:"花果山水帘洞”）

）＞

（

八43e："猪八戒〃，

age：88,

人03&“高老庄

）＞

（

八430："沙和尚"，

age：］。。。）

人。2〃通天河、

）＞

L

/**

*存一份旧的值，用于校验是否发生变化，是否修改

**/

oldCellValue：mJ。

KACthods：(

cclCassNaMe({row,八/HOW/八dex,co/〃3八/八dex}){

/owl八dex=HOW伍Wcx;//自定义指定一个索引，下方能够用到

h

dblclic^row,co/umn,cell,eve八。{

//工序号列单元格不允许编辑，别的列单元格可以编辑

if(colu^ia.label=="序号"){

/M$kcss〃ge({

tgpe："wami八g”>

&ess〃ge："序号列不允许编辑"，

!)；

return;

]

〃2.存一份旧的单元格的值

this.oldCellValuc=row[/2erty];

//3.然后把单元格的值，作为参数传递给实例化的法卜戊组件

letcellValue=row[colu^perty];

//4.实例化组件以后，带着参数，再挂载到对应位置

n.ewexteiadCoi^poMiats.iiaputC({

propsData：(

//使用pepsDa仅对象传递参数，子组件在props中可以接收到

cdlValue：cellValue,//传递单元格的值

SAVCROWD比&以xis.saseRowDat”，〃传递回调函数用于保存行数据，组件中可以触发

之

cellDokv\:cell,//传递这个dohA元素

row:row,//传递双击的行的数据

property:colukv\k\.pK'operty,//传递双击的是哪个字段

L

}).$3。〃八2"6".以u7ds八［OJ);//5*.Amount方法，用于将某个dokv\挂载到某个dom上

L

/**

*失去焦点的时候有以下操作

*i.校验新值是否等于原有值，若等于，说明用户未修改，就不发请求。若不等于就发请求，

然后更新切勿eData数据

2.然后使用于nAOirnt方法，挂载一个新的平a八标签doM在页面上，即恢复原样，而卯nn

标签也是实例化的哦

**/

saveRowData(parai^s){

c。八so/eJog("继承的子组件传递过来的数据〃，params);

//1.看看用户是否修改了

if(parai^s.cellValue==tkis.oldCdlValue){

c。八so/c./og(〃未修改数据，不用发请求与

}else(

para^,row[parai^\perty]=para^.cellValue;

//这里模拟一下发了请求，得到最新表体数据以后，更新tnb/eData

s&tTiiAn.eout(0=>{

//给那个数组的第几项修改为什么值

this.$s&tCthis.tableDatajparaiw.s.row.iin.d.ex,paraws.row)；

卜300);

1

〃2.恢复do侬节点成为原来的样子，有下面两种方式

*方式一：使用官方推荐的$