vxe-table v3 表格中使用 iview, view-design 组件库的

在公司开发大型项目中，使用主流表格库 vxe-table v3 和 iview, view-design 组件库，可以在可编辑单元格中渲染非常简单的使用更多的组件

官网：https://vxetable.cn

安装

npm install vxe-pc-ui@3.3.9 vxe-table@3.11.10 @vxe-ui/plugin-render-iview@3.0.0

// ...
import { VxeUI } from 'vxe-pc-ui'
import VxeUIPluginRenderIView from '@vxe-ui/plugin-render-iview'
import '@vxe-ui/plugin-render-iview/dist/style.css'
// ...

VxeUI.use(VxeUIPluginRenderIView)
// ...

使用输入框 Input

<template>
  <div>
    <vxe-table
      border
      show-overflow
      keep-source
      ref="tableRef"
      :edit-config="{ trigger: 'click', mode: 'row'}"
      :data="tableData">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" title="Number" width="80"></vxe-column>
      <vxe-column title="Name" field="name" min-width="140" :edit-render="{}">
        <template #edit="{ row }">
          <Input v-model="row.name"></Input>
        </template>
        <template #default="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </vxe-column>
      <vxe-column title="输入框" field="nickname" width="200" :edit-render="{}">
        <template #edit="{ row }">
          <Input v-model="row.nickname"></Inputt>
        </template>
        <template #default="{ row }">
          <span>{{ row.nickname }}</span>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    const tableData = [
      { id: 10001, name: 'Test1', nickname: 'Nickname11' },
      { id: 10002, name: 'Test2', nickname: '' }
    ]
    return {
      tableData
    }
  }
}
</script>

还有非常的多，具体需要去看官网文档了

https://gitee.com/xuliangzhan/vxe-table