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

来源：oschina

链接：https://my.oschina.net/u/4313733/blog/3421238