vxe简单表格

m0_62782752

已于 2024-05-14 18:33:53 修改

阅读量197

点赞数 2

文章标签： javascript 前端 html

于 2024-05-14 16:05:42 首次发布

本文链接：https://blog.csdn.net/m0_62782752/article/details/138854150

版权

<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();
        });
      }
    },
 //监听-etf
    handleClickShowModal({ checked,row }){
      console.log('etf');
      console.log('checked1',checked);
      console.log('row1',row);
    },
   //全选-全部选时时才会触发--etf
    selectAllEvent ({ checked }) {
      console.log('checked2',checked);
      this.type='etf'
      let that = this
      let 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)
    
    },
  //选中--etf
    selectChangeEvent ({ 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=broadcastFlag
      that.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.data
            that.riseData = res.data

            that.$refs.warnUpTable.clearCheckboxRow()
            let arr = []
            console.log('that.riseData',that.riseData);
            that.riseData.forEach((item,index) => {
                if(item.broadcastFlag == 2){
                  // item.checked = true
                  console.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中选中后刷新页面还是选中状态，对应的方法补充