iview 表格數據加載及表格內容編輯應用

本次應用效果如

 點擊“修改”觸發表格行編輯：

 編輯行各單元格內容，完畢后點擊保存按鈕更新編輯內容至表格數據源。

---

 對行單元格的編輯通過公用方法 renderTableColumn 來渲染，若需對單元格做驗證則需要再次擴展。

 renderTableColumn 的代碼如下：其中，editName 是待編輯單元格臨時存儲變量的字符串，columnName是當前單元格對應的key

renderTableColumn (editName, columnName, h, { row, index }) {
      let edit
      if (this.editTableIndex === index) {
        this[editName] = row[columnName]
        edit = [h('Input', {
          props: {
            value: row[columnName]
          },
          on: {
            input: (val) => {
              this[editName] = val
            }
          }
        })]
      } else {
        edit = row[columnName]
      }
      return h('div', [edit])
    },

完整代碼如下：

<template>
  <div style="padding:32px 64px">
    <h1>可編輯行</h1> <Button
      type="primary"
      @click="addRow"
    >添加一行</Button>
    <Table
      :data="data"
      :columns="tbColumns"
      border
    ></Table>
    <div class="main-page">
      <Page
        :total="totals"
        :page-size="pageSize"
        @on-change="change"
        show-elevator
        :current.sync="current"
        :page-size-opts="page_size_array"
        show-sizer
        show-total
        @on-page-size-change="handleChangeSize"
      ></Page>
    </div>
    {{data}}
  </div>
</template>
<script>
export default {
  data () {
    return {
      editTableIndex: -1,
      editName: '',
      editCode: '',
      editRemark: '',
      tbColumns:
        [
          {
            title: '編號',
            width: 80,
            align: 'center',
            key: 'id'
          },
          {
            title: '產品名稱',
            key: 'name',
            render: (h, { row, index }) => {
              return this.renderTableColumn('editName', 'name', h, { row, index })
            }
          },
          {
            title: '產品代碼',
            key: 'code',
            render: (h, { row, index }) => {
              return this.renderTableColumn('editCode', 'code', h, { row, index })
            }
          },
          {
            title: '產品描述',
            key: 'remark',
            render: (h, { row, index }) => {
              return this.renderTableColumn('editRemark', 'remark', h, { row, index })
            }
          },
          {
            title: '操作',
            render: (h, { row, index }) => {
              if (this.editTableIndex === index) {
                return [
                  h('Button', {
                    props: {
                      type: 'success'
                    },
                    on: {
                      click: () => {
                        this.data[index].name = this.editName
                        this.data[index].code = this.editCode
                        this.data[index].remark = this.editRemark
                        this.editTableIndex = -1
                        // 可在此處配置異步提交（缺省）
                      }
                    }
                  }, '保存'),
                  h('Button', {
                    props: {
                      type: 'error'
                    },
                    style: {
                      marginLeft: '6px'
                    },
                    on: {
                      click: () => {
                        this.editTableIndex = -1
                      }
                    }
                  }, '取消')
                ]
              } else {
                return [h('Button', {
                  props: {
                    type: 'info'
                  },
                  on: {
                    click: () => {
                      // this.editName = row.name
                      // this.editCode = row.code
                      // this.editRemark = row.remark
                      this.editTableIndex = index
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'warning'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '確認要刪除該行嗎？',
                        onOk: () => {
                          this.data.splice(index, 1)
                        },
                        onCancel: () => {
                          this.$Message.info('您已取消刪除.')
                        }
                      })
                    }
                  }
                }, '刪除'), h('Button', {
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: () => {
                      this.data.push({ id: '5', name: '', code: '', remark: '' })
                      this.editTableIndex = index + 1// 觸發新增行的行編輯
                    }
                  }
                }, ' + ')]
              }
            }
          }
        ],
      data: [],
      loading: false,
      current: 1,
      page_size_array: [10, 20, 30, 40, 60, 100],
      totals: 0, // 數據行數
      pageSize: 10, // 每頁顯示條數
      pageIndex: 1// 當前頁
    }
  },
  methods: {
    getList () {
      if (this.loading) return
      this.loading = true
      // 以下方法應根據實際應用場景來寫
      let filter = {}
      this.$axios
        .post('/api/v1/product/list', { filter: filter, sort: { id: 'ASC', name: 'DESC' }, page: this.pageIndex, limit: this.pageSize })
        .then(response => {
          console.log(response)
          this.data = response.data.data.docs
          this.totals = response.data.data.totals
          // console.log(this.totals)
          this.loading = false
        })
        .catch(function (error) { // 請求失敗處理
          console.log('請求失敗：' + error)
        })
    },
    // 分頁觸發
    change (page) {
      // console.log(page)
      this.pageIndex = page
      this.getList()
    },
    // 調整頁面大小后加載
    handleChangeSize (val) {
      this.pageSize = val
      this.$nextTick(() => {
        this.getList()
      })
    },
    // 對列的render處理：編輯和未編輯
    renderTableColumn (editName, columnName, h, { row, index }) {
      let edit
      if (this.editTableIndex === index) {
        this[editName] = row[columnName]
        edit = [h('Input', {
          props: {
            value: row[columnName]
          },
          on: {
            input: (val) => {
              this[editName] = val
            }
          }
        })]
      } else {
        edit = row[columnName]
      }
      return h('div', [edit])
    },
    // 添加一行
    addRow () {
      this.data.push({ id: '5', name: '', code: '', remark: '' })
      this.editTableIndex = this.data.length + 1// 觸發新增行的行編輯
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

 參考鏈接：https://www.cnblogs.com/renpingsheng/p/11256238.html