Element表格

目录

1、表格列求和
2、表格列标记序号
3、悬浮显示其他内容
4、文字过多在一行以省略号显示，悬浮显示全部内容
5、表格loading
6、表格样式
7、自定义内容
8、bug

一、求和

Element表格提供了一个show-summary属性，添加之后就会在表格尾部展示合计行。

默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。

可以自定义合计逻辑，使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中

显示所有列的和

<el-table :data="goodsList" border stripe highlight-current-row tooltip-effect="dark"
          style="width: 100%" show-summary >
    <el-table-column prop="goodsNumber" label="商品编号"  align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="goodsName" label="商品名称"  align="center" show-overflow-tooltip></el-table-column>    
    <el-table-column prop="retailPrice" label="指导零售价"  align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="orderAmount" label="数量" align="center" show-overflow-tooltip></el-table-column>   
    <el-table-column prop="actualPriceSubtotal" label="实付金额"  align="center" show-overflow-tooltip></el-table-column>
</el-table>

显示指定列(一列或多列)的和

<el-table :data="goodsList" border stripe highlight-current-row tooltip-effect="dark"
          style="width: 100%" show-summary :summary-method="getSummaries">
    <el-table-column prop="goodsNumber" label="商品编号"  align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="goodsName" label="商品名称"  align="center" show-overflow-tooltip></el-table-column>    
    <el-table-column prop="retailPrice" label="指导零售价"  align="center" show-overflow-tooltip></el-table-column>
    <el-table-column prop="orderAmount" label="数量" align="center" show-overflow-tooltip></el-table-column>   
    <el-table-column prop="actualPriceSubtotal" label="实付金额"  align="center" show-overflow-tooltip></el-table-column>
</el-table>

data

countPrice: null, // 合计金额,从后台获取后赋值

methods

getSummaries (param) {  
  const { columns, data } = param;
  let sums = [];      
  columns.forEach((column, index) => { 
    // 判断属性，将'合计'文字放置的位置               
    if (column.property === "orderAmount") {
      sums[index] = '实付合计:';
    }
    // 合计金额   
    if (column.property === "actualPriceSubtotal") {
      sums[index] = '￥' + this.countPrice
    }      
  });
  return sums;
}

二、标记序号

1、页面表格列添加type="index" :index="index"

<el-table-column type="index" :index="index" label="序号" width="80" align="center" ></el-table-column>

2、在methods中定义方法index,通过分页计算当前序号

index (val) {
  return (当前页数-1) * 分页条数 + val + 1
},

三、悬浮显示其他内容

官方示例：自定义列模板

<el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>悬浮显示内容，可以添加事件</p>          
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">显示内容</el-tag>
          </div>
        </el-popover>
      </template>
</el-table-column>

四、文字过长以省略号显示

1、el-table标签添加属性tooltip-effect="dark"
2、el-table-column标签添加属性show-overflow-tooltip

五、表格loading

el-table标签添加属性,并且以tableLoading变量控制开关

v-loading="tableLoading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.8)"

六、表格样式

1、行高

.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
}
.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 35px;
}

七、自定义内容

<el-table :data="goodsList" border style="width: 100%" >
    <el-table-column label="时间"  align="center" min-width="100">
        <template slot-scope="scope">
           <el-date-picker 
               v-model="scope.row.time"
               type="datetime"
               value-format="yyyy-MM-dd HH:mm:ss">
           </el-date-picker>
        </template>
    </el-table-column>    
</el-table>

八、bug

1、在table和tab一起使用的时候，如果有固定列，固定列中会多出一个下划线。

我的办法是把固定列去掉了，我的表格没有那么宽。

文档

table

网站导航

网站导航