Vxe UI vue vxe-table 表格中使用下拉表格,单元格渲染下拉表格

Vxe UI vue vxe-table 表格中使用下拉表格,单元格渲染下拉表格

单元格中渲染下拉表格,需要使用到 vxe-table-select 这个组件,在 vxe-table 4.7+ 中使用非常简单,只需要配置好渲染器数据源就可以。

支持单选

也可以多选

代码

html 复制代码
<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const currUserEditRender = reactive({
  name: 'VxeTableSelect',
  props: {
    columns: [
      { field: 'label', title: 'Name' },
      { field: 'role', title: 'Role' },
      { field: 'sex', title: 'Sex' },
      { field: 'address', title: 'Address' }
    ]
  },
  options: [
    { value: 10001, label: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { value: 10002, label: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { value: 10003, label: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { value: 10004, label: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})

const currUserListEditRender = reactive({
  name: 'VxeTableSelect',
  props: {
    multiple: true,
    columns: [
      { field: 'label', title: 'Name' },
      { field: 'role', title: 'Role' },
      { field: 'sex', title: 'Sex' },
      { field: 'address', title: 'Address' }
    ]
  },
  options: [
    { value: 10001, label: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { value: 10002, label: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { value: 10003, label: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { value: 10004, label: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})

const gridOptions = reactive({
  border: true,
  editConfig: {
    trigger: 'click',
    mode: 'row'
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 200, editRender: { name: 'VxeInput' } },
    { field: 'currUser', title: '下拉树单选', width: 200, editRender: currUserEditRender },
    { field: 'currUserList', title: '下拉树多选', width: 200, editRender: currUserListEditRender }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', currUser: null, currUserList: [] },
    { id: 10002, name: 'Test2', role: 'Test', currUser: 10002, currUserList: [10001] },
    { id: 10003, name: 'Test3', role: 'PM', currUser: null, currUserList: [10001, 10004] }
  ]
})

</script>

github https://github.com/x-extends/vxe-table
gitee

相关推荐
可触的未来,发芽的智生2 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
前端开发爱好者2 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀2 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
Element_南笙2 小时前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理
SmartSoftHelp开发辅助优化3 小时前
C# WinForm 编程高手:程序,进程,线程。程序,窗体,UI,后台。是如何协调工作的?深度解析>SmartSoftHelp魔法精灵工作室
microsoft·ui·c#
天***88963 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
胡斌附体4 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong4 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron
im_AMBER4 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web