element使用

一、el-table指定汇总列

简单用法：

增加 show-summary 属性，只对el-table-column 的 prop 属性附上值的汇总。

   <el-table       
            :row-key="(row) => row.Id"
            ref="goodsTableEL"
            :data="goodsData"
            border
            show-summary
            style="width: 100%">
 <el-table-column prop="ImgNo" label="料号"></el-table-column>
            <el-table-column prop="Qty"  sortable label="数量" v-slot="{row}">
              <el-input v-model="row.Qty" placeholder=""></el-input>     
            </el-table-column>
<el-table-column  sortable label="整箱数" v-slot="{row}">
              <el-input v-model="row.LargePackage" placeholder=""></el-input>     
            </el-table-column>
   </el-table>

常规用法：

<el-table       
            :row-key="(row) => row.Id"
            :data="listData"
            border
            show-summary
            :summary-method="summaryColumn"
            style="width: 100%">
            <!-- <el-table-column prop="Id" label="ID" > </el-table-column> -->
            <el-table-column prop="CostName" label="费用名称"  width="120px"></el-table-column>
            <el-table-column prop="AgentName" sortable label="供应商"></el-table-column>
            <el-table-column prop="Qty" sortable label="数量" width="85px"></el-table-column>
            <el-table-column prop="Price" sortable label="单价" width="85px"></el-table-column>            
            <el-table-column prop="Curr" sortable label="币别" width="85px"></el-table-column>
            <el-table-column prop="Amount" sortable label="金额" width="85px"></el-table-column>
            <el-table-column prop="SettleCurr" sortable label="核算币别" width="85px"></el-table-column>
            <el-table-column prop="SettleAmount" sortable label="核算金额" width="85px"></el-table-column>
   
      </el-table>

html

summaryColumn(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property == 'Qty'||column.property == 'Amount'||column.property == 'SettleAmount') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums
    },

 

二、el-table合并

以下引用：https://blog.csdn.net/xiubinxu/article/details/109749630

// HTML
<el-col
  v-for="(item, index) in result"
   :key="index"
   :span="24"
 >
  <el-table
    ref="my-table-com"
    :data="item.result.itemList"
    :header-cell-style="{background:'#F5F7FA'}"
    :span-method="(...arg)=>strategySpanMethod(...arg,item.result.itemList)"  // 先传参在调用方法
    highlight-current-row
  />
</el-col>
// javascipt
// 合并单元格函数
 strategySpanMethod: function({ row, column, rowIndex, columnIndex }, data) {
 // data 就是从这里动态传过来的, column.property是表头的key
   var spanArr = this.getSpanArr(data, column.property)
   const _row = spanArr[rowIndex]
   const _col = _row > 0 ? 1 : 0
   return {
     rowspan: _row,
     colspan: _col
   }
 },
 // 处理合并行的数据
 getSpanArr: function(data, spanKey) {
   var that = this
   var spanArr = []
   var pos = ''
   for (var i = 0; i < data.length; i++) {
     if (i === 0) {
       spanArr.push(1)
       pos = 0
     } else {
       // 判断当前元素与上一个元素是否相同
       if (data[i][spanKey] === data[i - 1][spanKey]) {
         spanArr[pos] += 1
         spanArr.push(0)
       } else {
         spanArr.push(1)
         pos = i
       }
     }
   }
   return spanArr
 }

修改到自己的项目中，可能是框架问题，变更如下：

 spanMethod({ row, column, rowIndex, columnIndex },data) {    
        var spanArr = []
        var pos = ''

        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            spanArr.push(1)
            pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i]['OutLnNo'] === data[i - 1]['OutLnNo']) {
              spanArr[pos] += 1
              spanArr.push(0)
            } else {
              spanArr.push(1)
              pos = i
            }
          }
        }
        const _row = spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0

        if(_row>0&&column.property==='OutLnNo'){
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        else if (column.property==='OutLnNo')
        {
          return {
                    rowspan: 0,
                    colspan: 0,
                  }
        }
    },

三、取 el-select 选择的name

 <el-select v-model="value" filterable placeholder="请选择收费车型"
      @change="selectChange"
      >
        <el-option
          v-for="item in options"
          :key="item.DicValue"
          :label="item.DicName"          
          :value="item.DicValue">
        </el-option>
      </el-select>

 selectChange(index){
              let listData=[];
              listData = this.options;
              for (let i = 0; i <listData.length ; i++) {                  
                  if ( listData[i].DicValue==this.value){
                      this.label=listData[i].DicName;
                      alert(listData[i].DicName);
                  }
              }
          },