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实现精准提取 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 输出格式化字符串示
阅读更多...
使用C#删除Excel表格中的重复行数据的代码详解

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元
阅读更多...
使用Python实现网页表格转换为markdown

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中，我们经常需要从网页上复制表格数据，并将其转换成Markdown格式，以便在文档、邮件或
阅读更多...
Python实现pdf电子发票信息提取到excel表格

Python实现pdf电子发票信息提取到excel表格

《Python实现pdf电子发票信息提取到excel表格》这篇文章主要为大家详细介绍了如何使用Python实现pdf电子发票信息提取并保存到excel表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟... 目录应用场景详细代码步骤总结优化应用场景电子发票信息提取系统主要应用于以下场景：企业财务部门：需
阅读更多...
windows和Linux安装Jmeter与简单使用方式

windows和Linux安装Jmeter与简单使用方式

《windows和Linux安装Jmeter与简单使用方式》：本文主要介绍windows和Linux安装Jmeter与简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows和linux安装Jmeter与简单使用一、下载安装包二、JDK安装1.windows设
阅读更多...
Python实现获取带合并单元格的表格数据

Python实现获取带合并单元格的表格数据

《Python实现获取带合并单元格的表格数据》由于在日常运维中经常出现一些合并单元格的表格,如果要获取数据比较麻烦,所以本文我们就来聊聊如何使用Python实现获取带合并单元格的表格数据吧... 由于在日常运维中经常出现一些合并单元格的表格，如果要获取数据比较麻烦，现将将封装成类，并通过调用list_exc
阅读更多...
使用Java将各种数据写入Excel表格的操作示例

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格
阅读更多...
python获取网页表格的多种方法汇总

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2