如何给自家网站做关键词优化,安溪网站建设,沈阳网站定制,网页制作图片怎么添加Vxe UI vue vxe-table 表格中使用下拉表格#xff0c;单元格渲染下拉表格
单元格中渲染下拉表格#xff0c;需要使用到 vxe-table-select 这个组件#xff0c;在 vxe-table 4.7 中使用非常简单#xff0c;只需要配置好渲染器数据源就可以。
支持单选 也可以多选
代码 …Vxe UI vue vxe-table 表格中使用下拉表格单元格渲染下拉表格
单元格中渲染下拉表格需要使用到 vxe-table-select 这个组件在 vxe-table 4.7 中使用非常简单只需要配置好渲染器数据源就可以。
支持单选 也可以多选
代码
templatedivvxe-grid v-bindgridOptions/vxe-grid/div
/templatescript setup
import { reactive } from vueconst 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] }]
})/scriptgithub https://github.com/x-extends/vxe-table gitee
