vxe-grid可编辑渲染

vxe-grid可编辑渲染

自定义单元格渲染后，需求在自定义的单元格能够编辑单元格的数据，这个时候需要用到edit-render，可编辑渲染，通过点击单元格显示编辑项，修改单元格数据

代码

<template>
  <div style="height: 400px">
    <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
  </div>
</template>
<script>
export default {
  data () {
    return {
      gridOptions: {
        highlightHoverRow: true,
        autoResize: true,
        height: 'auto',
        border: true,
        loading: false,
        editConfig: {
          trigger: 'dblclick', // 双击显示
          mode: 'cell',
          showStatus: true,
          showIcon: false,
          activeMethod: this.activeCellMethod
        },
        mouseConfig: {
          selected: true,
          area: true,
          extension: true
        },
        columns: [
          { type: 'seq' },
          { field: 'name', title: 'Name', cellRender: { name: 'MyLink' } },
          { field: 'role', title: 'Role', editRender: { name: 'RoleCell', events: { click: this.getCellData } } },
          { field: 'sex', title: 'Sex' }
        ],
        data: []
      }
    }
  },
  mounted () {
    this.getData().then((data) => {
      this.gridOptions.data = data
    })
  },
  methods: {
    activeCellMethod () {
      return true
    },
    getCellData (params) {
      console.log(params)
    },
    getData () {
      return new Promise((resolve) => {
        const list = [
          { name: 'Test1', role: '前端', sex: '男' },
          { name: 'Test2', role: '后端', sex: '男' },
          { name: 'Test3', role: '测试', sex: '男' },
          { name: 'Test4', role: '设计师', sex: '女' },
          { name: 'Test5', role: '前端', sex: '男' },
          { name: 'Test6', role: '前端', sex: '男' },
          { name: 'Test7', role: '前端', sex: '男' }
        ]
        resolve(list)
      })
    }
  }
}
</script>

// 修改table.js的编辑组件
VXETable.renderer.add('RoleCell', {
  autofocus: '.vxe-input--inner',
  // 双击单元格后显示输入框
  renderEdit (h, renderOpts, params) {
    // const { data } = params
    const { row, column } = params
    const { events } = renderOpts
    // console.log(params)
    return [
      <el-input size='small' text='text' v-model={ row[column.property] } onblur={ () => events.click(params) } />
    ]
  },
  // 默认显示模板
  renderCell (h, cellRender, params) {
    // eslint-disable-next-line no-unused-vars
    const { row, column } = params
    // console.log(row, column)
    return [
      <span>{ row[column.property] } </span>
      // <progress value= '70' max= '100' ></progress>
    ]
  }
})

双击单元格显示输入框，输入数据后，可将数据显示