vxe简单表格

2024-05-15 04:04
文章标签 简单 表格 vxe

本文主要是介绍vxe简单表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

<div><vxe-grid ref="warnUpTable" border="none" stripe :data="riseData" empty-text="暂无数据" :height="returnTableHeight" :row-config="{ isCurrent: true, isHover: true,keyField:'lDailyInstructionNo' }":column-config="{ resizable: true }"  :scroll-y="{ mode: 'wheel', oSize: 200 }" @filter-visible="filterVisibleEvent" :columns="riseColumns" :checkbox-config="{ highlight: true ,checkField:'',reserve:true,}"@cell-click="handleClickShowModal" @checkbox-all="selectAllEvent"@checkbox-change="selectChangeEvent"show-overflow="title" show-header-overflow="title" :cell-class-name="cellClassName"><!-- checkMethod:true,报错不是方法不显示 --><!-- range:true无用--><!-- visibleMethod:true, 去掉后td都显示了--><!-- checkField:'vcReportCode', 去掉后td不显示了  框为不选中--><!-- indeterminateField:'vcReportCode', --><!-- @cell-click="handleClickShowModal" 点击没有调用去掉内容不显示--><!-- <vxe-column type="checkbox" width="30" align="center"></vxe-column> --><!-- <vxe-column v-for="(item, index) in riseColumns" :key="index" :field="item.key" :title="item.title":align="item.align == 1 ? 'left' : item.align == 2 ? 'right' : 'center' " :width="item.key == 'vcFundName' ? '150px' : ''" :sortable="item.sortable == 1" show-overflow="title" show-header-overflow="title" ><template #default="{ row }"><span>{{ row[item.key] }}</span></template></vxe-column> --></vxe-grid><!-- <vxe-table ref="warnUpTable" border="none" stripe :data="riseData" empty-text="暂无数据" :height="returnTableHeight" :row-config="{ isCurrent: true, isHover: true }":column-config="{ resizable: true }"  :scroll-y="{ mode: 'wheel', oSize: 200 }" @filter-visible="filterVisibleEvent"><vxe-column type="checkbox" width="30" align="center"></vxe-column><vxe-column v-for="(item, index) in riseColumns" :key="index" :field="item.key" :title="item.title":align="item.align == 1 ? 'left' : item.align == 2 ? 'right' : 'center' " :width="item.key == 'vcFundName' ? '150px' : ''" :sortable="item.sortable == 1" show-overflow="title" show-header-overflow="title" ><template #default="{ row }"><span>{{ row[item.key] }}</span></template></vxe-column></vxe-table> --></div>

data中数据结构

 riseData: [{checkField:"vcCombiNo",iStockFlag: 1,"lDailyInstructionNo":15,"lFundId":39,"vcFundName":"公共卫生健康ETF","vcCombiNo":39400810,"vcCombiName":"权益补券组合","lAssetId":309,"vcAssetName":"权益资产单元","vcStockName":"藏格矿业","vcReportCode":"000408","cEntrust_direction":"2","lBeginDate":"20231219","lBeginTime":"91500","lEndDate":"20231219","lEndTime":"180000","lAmount":221200,"enBalance":0,"cInstructionLevel":0,"vcSummary":null,"enPrice1":0,"cMarketNo":"2","cBusinClass":"1","cPriceYype":"5","cEtfAuto":"2","cInstructionType":"2","cFairTrade":"1","lTotalDealAmount":0,"lTotayEntrustAmount":0,"dailyCompletionRatio":100,},{checkField:"vcCombiNo","lDailyInstructionNo":8,"lFundId":39,"vcFundName":"泰康300","vcCombiNo":39400810,"vcCombiName":"权益补券组合","lAssetId":309,"vcAssetName":"权益资产单元","vcStockName":"紫光股份","vcReportCode":"000938","cEntrust_direction":"2","lBeginDate":"20231219","lBeginTime":"91500","lEndDate":"20231219","lEndTime":"180000","lAmount":0,"enBalance":0,"cInstructionLevel":0,"vcSummary":null,"enPrice1":0,"cMarketNo":"2","cBusinClass":"1","cPriceYype":"5","cEtfAuto":"2","cInstructionType":"2","cFairTrade":"1","lTotalDealAmount":0,"lTotayEntrustAmount":0,"dailyCompletionRatio":0},{checkField:"vcCombiNo","lDailyInstructionNo":10,"lFundId":39,"vcFundName":"泰康300","vcCombiNo":39400810,"vcCombiName":"权益补券组合","lAssetId":309,"vcAssetName":"权益资产单元","vcStockName":"华东医药","vcReportCode":"000963","cEntrust_direction":"2","lBeginDate":"20231219","lBeginTime":"91500","lEndDate":"20231219","lEndTime":"180000","lAmount":0,"enBalance":0,"cInstructionLevel":0,"vcSummary":null,"enPrice1":0,"cMarketNo":"2","cBusinClass":"1","cPriceYype":"5","cEtfAuto":"2","cInstructionType":"2","cFairTrade":"1","lTotalDealAmount":0,"lTotayEntrustAmount":0,"dailyCompletionRatio":0},],riseColumns: [  { type: 'checkbox', width: 30, fixed: 'key' },{"field":"vcFundName","id":60,"lPageId":null,"lTableId":null,"minWidth":null,"width":null,"title":"基金名称","lOrder":null,"key":"vcFundName","type":null,"align":null,"cState":null,"vcState":null,"_checked":true,"tooltip":false,"myhighlight":false,"columntype":"nomal","cShow":null,"sortable":0,"screen":false},{"field":"lDailyInstructionNo","id":61,"lPageId":null,"lTableId":null,"minWidth":null,"width":null,"title":"指令序号","lOrder":null,"key":"lDailyInstructionNo","type":null,"align":null,"cState":null,"vcState":null,"_checked":true,"tooltip":false,"myhighlight":false,"columntype":"nomal","cShow":null,"sortable":0,"screen":false},{"field":"lAmount","id":62,"lPageId":null,"lTableId":null,"minWidth":null,"width":null,"title":"指令数量","lOrder":null,"key":"lAmount","type":null,"align":null,"cState":null,"vcState":null,"_checked":true,"tooltip":false,"myhighlight":false,"columntype":"nomal","cShow":null,"sortable":0,"screen":false},{"field":"lTotalDealAmount","id":63,"lPageId":null,"lTableId":null,"minWidth":null,"width":null,"title":"累计成交数量","lOrder":null,"key":"lTotalDealAmount","type":null,"align":null,"cState":null,"vcState":null,"_checked":true,"tooltip":false,"myhighlight":false,"columntype":"nomal","cShow":null,"sortable":0,"screen":false},{"field":"dailyCompletionRatio","id":64,"lPageId":null,"lTableId":null,"minWidth":null,"width":null,"title":"成交完成比例（%）","lOrder":null,"key":"dailyCompletionRatio","type":null,"align":null,"cState":null,"vcState":null,"_checked":true,"tooltip":false,"myhighlight":false,"columntype":"nomal","cShow":null,"sortable":0,"screen":false}],

methods中方法

// 展开或关闭筛选框filterVisibleEvent({ column, visible, $event }) {let _this = this;if (visible) {this.$nextTick(() => {if (_this.$refs.filterInput && _this.$refs.filterInput.length > 0)_this.$refs.filterInput[0].focus();});}},//监听-etfhandleClickShowModal({ checked,row }){console.log('etf');console.log('checked1',checked);console.log('row1',row);},//全选-全部选时时才会触发--etfselectAllEvent ({ checked }) {console.log('checked2',checked);this.type='etf'let that = thislet broadcastFlag = checked ? '2' : '1'that.upIdsList = []that.riseData.forEach(item => {that.upIdsList.push(item.lDailyInstructionNo)})console.log('this.riseData2---',this.riseData);console.log('that.upIdsList',that.upIdsList)let str = that.upIdsList.join(',')that.setUpBroadcast(str,broadcastFlag)},//选中--etfselectChangeEvent ({ checked,row }) {this.type='etf'console.log('row3',row);let broadcastFlag = checked ? '2' : '1'let that = this// that.riseData.forEach(item => {//   if(item.lDailyInstructionNo==row.lDailyInstructionNo){//     item.broadcastFlag=broadcastFlag//   }// })console.log('checked3---',checked);console.log('row.lDailyInstructionNo',row.lDailyInstructionNo,checked)// this.broadcastFlag=broadcastFlagthat.setUpBroadcast(row.lDailyInstructionNo,broadcastFlag)},
//播报设置setUpBroadcast(vcReportCode,broadcastFlag){// console.log('vcReportCode',vcReportCode);// console.log('broadcastFlag',broadcastFlag);// console.log('this.idsList',this.idsList)let str = this.idsList.join(',')if(!this.userId){this.$Message.warning({content: '播报设置有误，请联系相关开发人员！',duration: 3});return false}this.$httpGet(`/setUpBroadcast?vcReportCode=${vcReportCode}&broadcastFlag=${broadcastFlag}&userId=${this.userId}&type=${this.type}`).then(res => {if(res){this.$Message.warning({content: res.data.data,duration: 3});}})},cellClassName({ row, rowIndex,column, columnIndex}){// console.log('row, rowIndex,column, columnIndex',row, rowIndex,column, columnIndex)if(row.iStockFlag == 1 && column.property == 'vcFundName'){return 'redCell'}},
//获取数据
getRiseData（）{this.$httpGet(`/selectEtfOrder?userId=${that.userId}`).then(res => {if(res){// that.msgNew = res.data.datathat.riseData = res.datathat.$refs.warnUpTable.clearCheckboxRow()let arr = []console.log('that.riseData',that.riseData);that.riseData.forEach((item,index) => {if(item.broadcastFlag == 2){// item.checked = trueconsole.log('index',index)arr.push(that.riseData[index])}})console.log('arr',arr)that.$refs.warnUpTable.setCheckboxRow(arr, true)}})}

setCheckboxRow(rows, checked)

用于 type=checkbox 复选框，设置行为选中状态，第二个参数为选中与否

css样式

>>> .redCell{background: #d32f2f!important;
}

vxe-table 的 不一样的html结构

<vxe-table ref="warnUpTable" border="none" stripe :data="riseData" empty-text="暂无数据" :height="returnTableHeight" :row-config="{ isCurrent: true, isHover: true ,keyField: 'vcReportCode'}":column-config="{ resizable: true }" :checkbox-config="{ highlight: true,reserve:true }" :scroll-y="{ mode: 'wheel', oSize: 200 }" @filter-visible="filterVisibleEvent":cell-style="cellStyle" @checkbox-all="selectAllEvent"@checkbox-change="selectChangeEvent"><vxe-column type="checkbox" width="30" align="center"></vxe-column><vxe-column v-for="(item, index) in riseColumns" :key="index" :field="item.key" :title="item.title" :fixed="item.isFix == 1 ? 'left' : ''" :align="item.align == 1 ? 'left' : item.align == 2 ? 'right' : 'center' " :min-width="item.minWidth" :width="item.width" :sortable="item.sortable == 1"show-overflow="title" show-header-overflow="title" :filters="item.filters":filter-method="filterMethod" :filter-render="item.filterRender"><template #filter="{ $panel, column }" v-if="item.isFilter == 1"><template v-for="(option, index) in column.filters"><DatePicker v-if="column.title.indexOf('时间') > -1" type="date" placeholder="请选择" clearable format="yyyy-MM-dd" :key="index" v-model="option.data" @on-change="$panel.changeOption($event, !!option.data, option)" style="width:120px"></DatePicker><input v-else style="width:120px" ref="filterInput" class="my-input" type="type" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)" @keyup.enter="$panel.confirmFilter()" placeholder="回车确认" /></template></template><template #default="{ row }"><span>{{ row[item.key] }}</span></template></vxe-column></vxe-table>

vxe中 选中后刷新页面还是选中状态，对应的方法补充

这篇关于vxe简单表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/990748。

相关文章

Python 基于http.server模块实现简单http服务的代码举例

Python 基于http.server模块实现简单http服务的代码举例

《Python基于http.server模块实现简单http服务的代码举例》Pythonhttp.server模块通过继承BaseHTTPRequestHandler处理HTTP请求,使用Threa... 目录测试环境代码实现相关介绍模块简介类及相关函数简介参考链接测试环境win11专业版python
阅读更多...
C#使用Spire.XLS快速生成多表格Excel文件

C#使用Spire.XLS快速生成多表格Excel文件

《C#使用Spire.XLS快速生成多表格Excel文件》在日常开发中,我们经常需要将业务数据导出为结构清晰的Excel文件,本文将手把手教你使用Spire.XLS这个强大的.NET组件,只需几行C#... 目录一、Spire.XLS核心优势清单1.1 性能碾压：从3秒到0.5秒的质变1.2 批量操作的优雅
阅读更多...
python连接sqlite3简单用法完整例子

python连接sqlite3简单用法完整例子

《python连接sqlite3简单用法完整例子》SQLite3是一个内置的Python模块,可以通过Python的标准库轻松地使用,无需进行额外安装和配置,：本文主要介绍python连接sqli... 目录1. 连接到数据库2. 创建游标对象3. 创建表4. 插入数据5. 查询数据6. 更新数据7. 删除
阅读更多...
Jenkins的安装与简单配置过程

Jenkins的安装与简单配置过程

《Jenkins的安装与简单配置过程》本文简述Jenkins在CentOS7.3上安装流程,包括Java环境配置、RPM包安装、修改JENKINS_HOME路径及权限、启动服务、插件安装与系统管理设置... 目录www.chinasem.cnJenkins安装访问并配置JenkinsJenkins配置邮件通知
阅读更多...
Python yield与yield from的简单使用方式

Python yield与yield from的简单使用方式

《Pythonyield与yieldfrom的简单使用方式》生成器通过yield定义,可在处理I/O时暂停执行并返回部分结果,待其他任务完成后继续,yieldfrom用于将一个生成器的值传递给另一... 目录python yield与yield from的使用代码结构总结Python yield与yield
阅读更多...
Java中使用 @Builder 注解的简单示例

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程，然而 @Builder
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
Python实现精准提取 PDF中的文本,表格与图片

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容：获取整页文本与指定区域内容获取页面上的所有文本内容获取
阅读更多...
基于Python实现一个简单的题库与在线考试系统

基于Python实现一个简单的题库与在线考试系统

《基于Python实现一个简单的题库与在线考试系统》在当今信息化教育时代,在线学习与考试系统已成为教育技术领域的重要组成部分,本文就来介绍一下如何使用Python和PyQt5框架开发一个名为白泽题库系... 目录概述功能特点界面展示系统架构设计类结构图Excel题库填写格式模板题库题目填写格式表核心数据结构
阅读更多...
C/C++ chrono简单使用场景示例详解

C/C++ chrono简单使用场景示例详解

《C/C++chrono简单使用场景示例详解》：本文主要介绍C/C++chrono简单使用场景示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录chrono使用场景举例1 输出格式化字符串chrono使用场景China编程举例1 输出格式化字符串示
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2