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开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Mysql表的简单操作(基本技能)

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例：修改表在数据库中，表的操作主要
阅读更多...
springboot简单集成Security配置的教程

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》：本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig（自定义资源权限规则
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
如何使用Python实现一个简单的window任务管理器

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i
阅读更多...
C++中函数模板与类模板的简单使用及区别介绍

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中，模板是实现泛型编程
阅读更多...
Java利用poi实现word表格转excel

Java利用poi实现word表格转excel

《Java利用poi实现word表格转excel》这篇文章主要为大家详细介绍了Java如何利用poi实现word表格转excel,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、每行对象类需要针对不同的表格进行对应的创建。package org.example.wordToEx
阅读更多...
使用EasyExcel实现简单的Excel表格解析操作

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》：本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis
阅读更多...
Java中数组转换为列表的两种实现方式(超简单)

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架（Arrays.asList）1.1 示例代码1.
阅读更多...
使用Python实现表格字段智能去重

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2