在开发 vue 大型项目中,必然少不了 vxe-table 专业的表格库,当同时配合 element-plus 组件库使用时,发现一个问题,就是在单元格中渲染 el-select 时,会导致下拉选项无法被选中,点击后立马就消失,看了 vxe-table 官方文档,是支持与任意第三方库集成的,发现官网扩展插件里面有个适配插件安装一下就可以了正常选择了...
<el-select v-model="row.name" :popper-append-to-body="false" > ... 1. 2. 3. 4. 5.
<vxe-table-column field="date2" title="ElTimePicker" :edit-render="{type: 'default'}"> <template v-slot:edit="{ row }"> <el-time-select v-model="row.date2" :picker-options="{start: '08:30', step: '00:15', end: '18:30'}" ></el-time-select> </template> </vxe-table...
Copy link joufulpencommentedNov 15, 2023 可复现的链接: https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-wjwzsv 问题描述与截图: 编辑表格嵌套element plus 的el-select组件时 el-select会失效 无法v-model值 change方法也无法触发; elelment plus 版本2.3.12 ...
.vxe-select--panel{z-index:9997 !important}</style> 修改后的效果图 (三) 图中的下拉多选项编辑时,下拉框不显示也是被遮挡,同样修改vxe-select--panel样式
optionGroupProps只对 name=ElSelect 有效,下拉组件分组选项属性参数配置Object—{ options: 'options', label: 'label' } events渲染组件附加事件,参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments )Object—— nativeEvents渲染组件附加事件,参数为 ( {row,rowIndex,column,columnIndex}, ....
import { ElMessageBox } from 'element-plus';import { t, VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';import _ from 'lodash' const onedit = ref(false); const regionList = ref([]); const tableData = ref([] as VxeTablePropTypes.Data); const selectList = ref([ ...
npm install sortablejs--save// 在需要的页面引入JSimportSortablefrom'sortablejs';// 列拖拽columnDrop(){this.$nextTick(()=>{letxTable=this.$refs.xTable;if(xTable){this.sortable=Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),{handle:'.vx...
vue中使用vxe-table制作可编辑表格的使用过程 vue中使⽤vxe-table制作可编辑表格的使⽤过程 项⽬上有⼀个表格需要实现在线编辑，开始⽤了 element 的el-table 实现，单元格内基础情况就是监听了单击单元格切换⼀个span标签与input标签，复杂点的单元格使⽤了⼤量的条件判断来实现对应的编辑操作，⽐如...
{max: 35, min: 18}}"></vxe-table-column> <vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{name: 'ElSelect', options: sexList}"></vxe-table-column> <vxe-table-column prop="region" label="ElCascader" width="200" :edit-render="{name: 'ElCascader', ...