vxe-table编辑单元格动态插槽slot的使用

2024-03-02 17:52

本文主要是介绍vxe-table编辑单元格动态插槽slot的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

业务场景:表格中只有特定某一行的的单元格可以编辑,列很多,为每个列写个插槽要写很多重复代码,所以这里使用动态插槽,简化代码量。显示编辑图标,点击编辑图标隐藏。失去焦点保存调后台接口。

解决办法:

1、后端返回的数据里可以编辑的行数据添加属性 edit: true;不可编辑的行数据里添加属性 edit: false;

2、把列数组里的插槽和field提取出来为循环使用做准备,如果直接使用导入进来的columns无法显示,所以需要处理后使用。

列名文件示例columns.js

export const columns1 = [{title: '名称',field: "heatSourceName",align: 'left',width: "160",slots: { header: 'header_heatSourceName', default: '_heatSourceName' },},{title: "日流量(t/h)",field: "supTemp",width: "140",align: 'right',sortable: false,editRender: { autofocus: '.vxe-input--inner' },slots: { default: '_supTemp', edit: 'edit_supTemp' },},{title: "日热量(GJ/h)",field: "supPres",width: "140",align: 'right',sortable: false,editRender: { autofocus: '.vxe-input--inner' },slots: { default: '_supPres', edit: 'edit_supPres' },},{title: "日压力(Mpa)",field: "instFlowSup",width: "160",align: 'right',sortable: false,editRender: { autofocus: '.vxe-input--inner' },slots: { default: '_instFlowSup', edit: 'edit_instFlowSup' },}, ...]

HTML写法

<vxe-grid ref="xGrid1" v-bind="gridOptions1" :span-method="spanMethods"><template #header_heatSourceName><div class="first-col"><div class="first-col-top">指标</div><div class="first-col-bottom">热源</div></div></template><!--  分割线,动态插槽写法   --><template v-for="item in defaultSlots1" :key="item.field" v-slot:[item.slot]="{ row }"><div style="display: flex; align-items: center;`justify-content: ${row[item.field] === 'heatSourceName' ? flex-start : flex-end}`"v-if="row.edit && timeInfo === timeInfo1"><i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row[item.field] }}</div><div v-else>{{ row[item.field] }}</div></template><template v-for="item in editSlots1" :key="item.field" v-slot:[item.slot]="{ row }"><div v-if="row.edit && timeInfo === timeInfo1"><vxe-input v-model="row[item.field]" type="number" :min="0" :max="99999999"></vxe-input></div><div v-else>{{ row[item.field] }}</div></template><!--  分割线,下面为常规写法   --><!-- <template #_supTemp="{ row }"><div style="display: flex; align-items: center;justify-content: flex-end;"v-if="row.edit && timeInfo === timeInfo1"><i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row.supTemp }}</div><div v-else>{{ row.supTemp }}</div></template><template #edit_supTemp="{ row }"><div v-if="row.edit && timeInfo === timeInfo1"><vxe-input v-model="row.supTemp" type="number" :min="0" :max="99999999"></vxe-input></div><div v-else>{{ row.supTemp }}</div></template><template #_supPres="{ row }"><div style="display: flex; align-items: center;justify-content: flex-end;"v-if="row.edit && timeInfo === timeInfo1"><i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row.supPres }}</div><div v-else>{{ row.supPres }}</div></template><template #edit_supPres="{ row }"><div v-if="row.edit && timeInfo === timeInfo1"><vxe-input v-model="row.supPres" type="number" :min="0" :max="99999999"></vxe-input></div><div v-else>{{ row.supPres }}</div></template><template #_waterCnp="{ row }"><div style="display: flex; align-items: center;justify-content: flex-end;"v-if="row.edit && timeInfo === timeInfo1"><i class="vxe-cell--edit-icon vxe-icon-edit" style="margin-right: 5px;"></i>{{ row.waterCnp }}</div><div v-else>{{ row.waterCnp }}</div></template><template #edit_waterCnp="{ row }"><div v-if="row.edit && timeInfo === timeInfo1"><vxe-input v-model="row.waterCnp" type="number" :min="0" :max="99999999"></vxe-input></div><div v-else>{{ row.waterCnp }}</div></template> --></vxe-grid>

 Js写法

 

<script>
import {defineComponent,ref,reactive,toRefs,computed,watch,onMounted,nextTick,
} from 'vue'
import { columns1 } from './columns.js';
import moment from 'moment'
import { useAppStoreWithOut } from '@/store/modules/app'export default defineComponent({setup() {const appStore = useAppStoreWithOut();const state = reactive({timeInfo: moment(appStore.getSysTime).subtract(1, 'day').format('YYYY年MM月DD日'),timeInfo1: moment(appStore.getSysTime).subtract(1, 'day').format('YYYY年MM月DD日'),gridOptions1: {border: true,height: '100%',showFooter: false,showOverflow: true,'column-config': { resizable: false },'edit-config': {trigger: 'click', mode: 'cell', showIcon: false },'scroll-y': { enable: true, mode: 'wheel' },columns: computed(() => {// 拼接序号列return columns1;}),data: computed(() => {let data = [{"heatSourceName": "Leo源","supTemp": null,"supPres": null,"instFlowSup": null,"retTemp": null,"retPres": null,"muwInstFlow": null,"heatCnp": null,"waterCnp": null,"muwaccFlow": null,"accHeat": null},{"heatSourceName": "晋源","supTemp": "86.89","supPres": null,"instFlowSup": "1028.31","retTemp": "41.51","retPres": "0.111","muwInstFlow": "514.64","heatCnp": "7923.92","waterCnp": "396.58","muwaccFlow": "29207293.83","accHeat": "680.0334"},{"heatSourceName": "龙山","supTemp": "86.90","supPres": null,"instFlowSup": "514.24","retTemp": "41.50","retPres": null,"muwInstFlow": "515.29","heatCnp": "3960.97","waterCnp": "395.64","muwaccFlow": "1148264.05","accHeat": "166.2449"}]data.forEach((item, index) => {if (index === 1 || index === 2) {item.edit = true} else {item.edit = false}});return data}),},// 合并单元格方法,这里只合并第一行和第二行spanMethods({ row, $rowIndex, column, data }) {let fields = ["retTemp"]let cellValue = row[column.property]if ($rowIndex == 2 || $rowIndex == 3) {if (cellValue && fields.includes(column.property)) {let prevRow = data[$rowIndex - 1]let nextRow = data[$rowIndex + 1]if (prevRow && prevRow[column.property] === cellValue) {return { rowspan: 0, colspan: 0 }} else {let countRowspan = 1while (nextRow && nextRow[column.property] === cellValue) {nextRow = data[++countRowspan + $rowIndex]}if (countRowspan > 1) {return { rowspan: countRowspan, colspan: 1 }}}}}})// 提取默认插槽const defaultSlots1 = computed(() => {return columns1.map((column, index) => {return {slot: column.slots.default,field: column.field,}})})// 提取编辑插槽const editSlots1 = computed(() => {return columns1.map((column, index) => {return {slot: column.slots.edit,field: column.field}})})}return {...toRefs(state),   defaultSlots1,editSlots1,}},})
</script>

 

这篇关于vxe-table编辑单元格动态插槽slot的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766949

相关文章

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期