? ? 在使用iview過(guò)程中，發(fā)現(xiàn)一個(gè)很不方便的問(wèn)題肮雨，就是table居然沒(méi)有editor功能。归敬。酷含。這個(gè)在長(zhǎng)期使用easyui后是覺(jué)得不能忍的事情。于是研究了一下table汪茧，發(fā)現(xiàn)可以使用render來(lái)實(shí)現(xiàn)editor功能。
????如何使用呢限番？簡(jiǎn)單說(shuō)table舱污，使用的時(shí)候需要一個(gè)columns參數(shù)，這個(gè)參數(shù)是用來(lái)解析列映射的弥虐，render也能在columns里面聲明：
Clumns:[
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title: '序號(hào)',
? ? ? ? ? ? ? ? ? ? ? ? key: 'seq'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? title: '名稱(chēng)',
? ? ? ? ? ? ? ? ? ? ? ? key: 'name'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title: '數(shù)量',
? ? ? ? ? ? ? ? ? ? ? ? key: 'count',
? ? ? ? ? ? ? ? ? ? ? ? render: (h, params) =>
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return h("div", [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? h(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "Input",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? domProps: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? textAlign: "center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }扩灯，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? on:{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? 這樣，我們就在數(shù)量一列成功綁定了一個(gè)input輸入框了霜瘪，現(xiàn)在問(wèn)題來(lái)了珠插，輸入框有了缸托，可是輸入之后的數(shù)據(jù)如何取出來(lái)呢兆蕉？
? ? 現(xiàn)在我們綁定的input里面有這么幾個(gè)屬性：
? ??props：綁定vue的屬性
? ??domProps：綁定生成的dom的屬性
? ??style：dom的樣式文件
? ??on：綁定事件
? ? 那么我們就需要使用這么幾個(gè)屬性來(lái)實(shí)現(xiàn)雙向綁定裹粤。
? ? 首先绪颖，我們需要把每一列的值都賦給imput里面无宿，是imput綁定展示每一列的值敏释，這時(shí)候需要使用到imput的value屬性了暇检，我們知道用踩，input展示的值其實(shí)就是它的value的值个唧，所以我們需要使用props來(lái)綁定一下江解。
? ??props: {
? ? ? ? ????? value:params.row.count
????},
? ? ? domProps: {
? ? ? ? ? ? ? ?value:params.row.count
? ? ?},
? ? 我這里處理是把vue屬性和dom屬性都給他綁定上，也沒(méi)有測(cè)試是哪一個(gè)屬性觸發(fā)了綁定效果徙歼。有空閑的小伙伴可以自己測(cè)試一下犁河，我也就偷了個(gè)懶鳖枕。
? ? 現(xiàn)在input已經(jīng)綁定了展示屬性了，那么我們還需要把input輸入的值綁定個(gè)我的數(shù)據(jù)桨螺。我發(fā)現(xiàn)使用prop沒(méi)有用了耕魄，那么我們就用其他的方式來(lái)實(shí)現(xiàn)。
? ? 現(xiàn)在還有一個(gè)on沒(méi)有使用彭谁，這個(gè)是用來(lái)綁定input觸發(fā)事件的吸奴，我們現(xiàn)在就有了多個(gè)實(shí)現(xiàn)方案，比如在input失去焦點(diǎn)的時(shí)候觸發(fā)缠局，input里面的值改變的時(shí)候觸發(fā)则奥，或者你想寫(xiě)個(gè)定時(shí)器觸發(fā)都行。
? ? 那on屬性怎么使用呢狭园，這可是個(gè)大坑读处。。唱矛。我剛開(kāi)始的時(shí)候直接寫(xiě) ：
on:{
? ? ? ?change: (event) => {
? ? ? ? ? ? console.log(event);
? ? ? ? ?}
? ? ? ? onChange: (event) => {
????????????console.log(event);
? ? ? ? ?}
? ? ? }
? ? 然而罚舱，怎么不觸發(fā)？绎谦？管闷？？寫(xiě)成on-change又會(huì)報(bào)錯(cuò)窃肠。包个。。冤留。碧囊。
? ? 最后，查找資料纤怒，發(fā)現(xiàn)糯而，我忘了一個(gè)很重要的東西。泊窘。熄驼。那就是 引號(hào) 。州既。谜洽。。
on:{
? ? ? ?'on-change': (event) => {
????????????console.log(event);
? ??????????console.log(params);
? ? ? ? ?}
? ? ? }
? ? ? ? 吴叶。阐虚。。這還真是vue蚌卤。实束。奥秆。
? ? 好了，事件觸發(fā)了咸灿，如何綁定到數(shù)據(jù)里面去呢构订？我這里采用的是onChange事件來(lái)觸發(fā)，我順手把render的參數(shù)params和事件event打印了出來(lái)避矢，在里面找了一下悼瘾，發(fā)現(xiàn)params里面就有row這個(gè)屬性，應(yīng)該就是這一行审胸，event里面倒是沒(méi)有看出什么東西亥宿，但是看見(jiàn)有個(gè)target，于是就直接用targe來(lái)取了dom對(duì)象然后調(diào)用input的vuleu獲取input中的值：
on:{
? ? ? ?'on-change': (event) => {
????????????params.row.count= event.target.value;
? ? ? ? ?}
? ? ? }
? ? 這下該好了把砂沛，于是我打了個(gè)斷點(diǎn)烫扼，發(fā)現(xiàn)賦值取值都成功了，但是碍庵，在我submit的時(shí)候我后臺(tái)拿到data里面居然又沒(méi)有值了映企。。静浴。
? ? 這次我是真沒(méi)有找到解決辦法堰氓。于是在onchange事件中用this.data取我table的數(shù)據(jù)data，然后通過(guò)params.row.id來(lái)找到這一條記錄马绝，然后去修改data值豆赏。。富稻。終于實(shí)現(xiàn)了雙向綁定。
