【 iview 實踐指南】之如何優雅地在"Table"中嵌套"Input"（代碼篇）

iview 版本 3.2.0 +
template 部分：

<template>
  <div>
    <Table class="data-manage-table"
           border
           :disabled-hover="true"
           :columns="columns"
           :data="datalist">
      <template slot-scope="{ row, index }" slot="result">
        <Input v-model="tempDatalist[index]['result']"/>
      </template>
      <template slot-scope="{ row, index }" slot="remark">
        <Input v-model="tempDatalist[index]['remark']"/>
      </template>
    </Table>
  </div>
</template>

data 部分：

data () {
  return {
    columns: [
      { winWidth: 120, align: 'center', title: 'KPI指標', key: 'target' },
      { width: 140, align: 'center', title: '月度權重(%)', key: 'weight' },
      { winWidth: 80, align: 'center', title: '考覈結果', slot: 'result' },
      { winWidth: 80, align: 'center', title: '備註', slot: 'remark' },
    ],
    datalist: [
      { target: '指標1', weight: '10', result: '', remark: '', },
      { target: '指標2', weight: '20', result: '', remark: '', },
      { target: '指標3', weight: '30', result: '', remark: '', },
      { target: '指標4', weight: '40', result: '', remark: '', },
    ],
    tempDatalist: []
  }
},
created () {
  this.tempDatalist = cloneObj(this.datalist)
}

iview 版本 3.2.0 -

template 部分：

<template>
  <div>
    <Table class="data-manage-table"
           border
           :disabled-hover="true"
           :columns="columns"
           :data="datalist">
    </Table>
  </div>
</template>

data 部分：

data () {
　let vm = this;
  return {
    columns: [
      { winWidth: 120, align: 'center', title: 'KPI指標', key: 'target' },
      { width: 140, align: 'center', title: '月度權重(%)', key: 'weight' },
      { winWidth: 80, align: 'center', title: '考覈結果', key: 'result',
        render: (h, params) => {
          return h('div', [
            h('Input', {
              props: {
                value: vm.datalist[params.index].result
              },
              on: {
                input: function (event) {
                  vm.$set(vm.tempDatalist[params.index], 'result', event)
                }
              }
            })
          ])
        }
      },
      { winWidth: 80, align: 'center', title: '備註', key: 'remark',
        render: (h, params) => {
          return h('div', [
            h('Input', {
              props: {
                value: vm.datalist[params.index].remark
              },
              on: {
                input: function (event) {
                  vm.$set(vm.tempDatalist[params.index], 'remark', event)
                }
              }
            })
          ])
        }
      },
    ],
    datalist: [
      { target: '指標1', weight: '10', result: '', remark: '', },
      { target: '指標2', weight: '20', result: '', remark: '', },
      { target: '指標3', weight: '30', result: '', remark: '', },
      { target: '指標4', weight: '40', result: '', remark: '', },
    ],
    tempDatalist: []
  }
},
created () {
  this.tempDatalist = cloneObj(this.datalist)
}

 

cloneObj：

// 克隆對象
export const cloneObj = function (obj) {
  let o
  if (typeof obj === 'object') {
    if (obj === null) {
      o = null
    } else {
      if (obj instanceof Array) {
        o = []
        for (let i = 0, len = obj.length; i < len; i++) {
          o.push(cloneObj(obj[i]))
        }
      } else {
        o = {}
        for (let j in obj) {
          o[j] = cloneObj(obj[j])
        }
      }
    }
  } else {
    o = obj
  }
  return o
}