el-table

(1)表格内容高度改变



(2)表格背景色以及每行背景色改变

<el-tabel
  :cell-style="{background:'#fff'}"
  :header-cell-style="{
    background-color:'#ececec',
    fontWeight:700,
    color:'#000'
  }"
>

(3)表格选择框 部分不能选中

<el-table-column type="selection" :selectable="isRowSelectable"/>


isRowSelectable(row){
  if(row.lx === '01'){
    return false
  }else{
    return true
  }
}

(4)是否在表尾显示合计行(底部加的总数)

<el-table v-loading="loding" :data="list" show-summary  :summary-method="getSummaries">
  <el-table-column label="姓名" align="center" prop="xm"> </el-table-column>
  <el-table-column label="语文" align="center" prop="yw"> </el-table-column> 
  <el-table-column label="数学" align="center" prop="xs"> </el-table-column>
</el-table>


      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = param.length;
            return;
          }
          if (index === 1) {
            sums[index] = '总数';
            return;
          }

          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }

(5)在表格末尾加合计

<el-table v-loading="loding" :data="list" show-summary  :summary-method="getSummaries">

  <el-table-column label="姓名" align="center" prop="xm"> </el-table-column>
  <el-table-column label="语文" align="center" prop="yw"> </el-table-column> 
  <el-table-column label="数学" align="center" prop="xs"> </el-table-column>

<el-table-column label="总数" align="center" prop="zs"> </el-table-column>
</el-table>

在数据得到的时候将这个总数整个字段并计算出来

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值