? ? 在使用iview過程中，發(fā)現(xiàn)一個很不方便的問題，就是table居然沒有editor功能。。。這個在長期使用easyui后是覺得不能忍的事情。于是研究了一下table，發(fā)現(xiàn)可以使用render來實現(xiàn)editor功能。
????如何使用呢？簡單說table，使用的時候需要一個columns參數(shù)，這個參數(shù)是用來解析列映射的，render也能在columns里面聲明：
Clumns:[
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title: '序號',
? ? ? ? ? ? ? ? ? ? ? ? key: 'seq'
? ? ? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? ? ? title: '名稱',
? ? ? ? ? ? ? ? ? ? ? ? key: 'name'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title: '數(shù)量',
? ? ? ? ? ? ? ? ? ? ? ? key: 'count',
? ? ? ? ? ? ? ? ? ? ? ? render: (h, params) =>
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return h("div", [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? h(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "Input",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? props: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? domProps: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? textAlign: "center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? on:{}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? 這樣，我們就在數(shù)量一列成功綁定了一個input輸入框了，現(xiàn)在問題來了，輸入框有了，可是輸入之后的數(shù)據(jù)如何取出來呢？
? ? 現(xiàn)在我們綁定的input里面有這么幾個屬性：
? ??props：綁定vue的屬性
? ??domProps：綁定生成的dom的屬性
? ??style：dom的樣式文件
? ??on：綁定事件
? ? 那么我們就需要使用這么幾個屬性來實現(xiàn)雙向綁定。
? ? 首先，我們需要把每一列的值都賦給imput里面，是imput綁定展示每一列的值，這時候需要使用到imput的value屬性了，我們知道，input展示的值其實就是它的value的值，所以我們需要使用props來綁定一下。
? ??props: {
? ? ? ? ????? value:params.row.count
????},
? ? ? domProps: {
? ? ? ? ? ? ? ?value:params.row.count
? ? ?},
? ? 我這里處理是把vue屬性和dom屬性都給他綁定上，也沒有測試是哪一個屬性觸發(fā)了綁定效果。有空閑的小伙伴可以自己測試一下，我也就偷了個懶。
? ? 現(xiàn)在input已經(jīng)綁定了展示屬性了，那么我們還需要把input輸入的值綁定個我的數(shù)據(jù)。我發(fā)現(xiàn)使用prop沒有用了，那么我們就用其他的方式來實現(xiàn)。
? ? 現(xiàn)在還有一個on沒有使用，這個是用來綁定input觸發(fā)事件的，我們現(xiàn)在就有了多個實現(xiàn)方案，比如在input失去焦點的時候觸發(fā)，input里面的值改變的時候觸發(fā)，或者你想寫個定時器觸發(fā)都行。
? ? 那on屬性怎么使用呢，這可是個大坑。。。我剛開始的時候直接寫 ：
on:{
? ? ? ?change: (event) => {
? ? ? ? ? ? console.log(event);
? ? ? ? ?}
? ? ? ? onChange: (event) => {
????????????console.log(event);
? ? ? ? ?}
? ? ? }
? ? 然而，怎么不觸發(fā)？？？？寫成on-change又會報錯。。。。。
? ? 最后，查找資料，發(fā)現(xiàn)，我忘了一個很重要的東西。。。那就是 引號 。。。。
on:{
? ? ? ?'on-change': (event) => {
????????????console.log(event);
? ??????????console.log(params);
? ? ? ? ?}
? ? ? }
? ? ? ? 。。。這還真是vue。。。
? ? 好了，事件觸發(fā)了，如何綁定到數(shù)據(jù)里面去呢？我這里采用的是onChange事件來觸發(fā)，我順手把render的參數(shù)params和事件event打印了出來，在里面找了一下，發(fā)現(xiàn)params里面就有row這個屬性，應(yīng)該就是這一行，event里面倒是沒有看出什么東西，但是看見有個target，于是就直接用targe來取了dom對象然后調(diào)用input的vuleu獲取input中的值：
on:{
? ? ? ?'on-change': (event) => {
????????????params.row.count= event.target.value;
? ? ? ? ?}
? ? ? }
? ? 這下該好了把，于是我打了個斷點，發(fā)現(xiàn)賦值取值都成功了，但是，在我submit的時候我后臺拿到data里面居然又沒有值了。。。
? ? 這次我是真沒有找到解決辦法。于是在onchange事件中用this.data取我table的數(shù)據(jù)data，然后通過params.row.id來找到這一條記錄，然后去修改data值。。。終于實現(xiàn)了雙向綁定。
