本文主要是介绍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简单表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
