自定义element-ui table内容

本文参考：https://blog.csdn.net/qq_32610671/article/details/90731672

cell-style自定义单元格字体样式

image.png

<el-table :data="tableData" tooltip-effect="dark"  @selection-change="handleSelectionChange"  :cell-style="cellStyle" border>
      <el-table-column  type="selection" width="55" :selectable="isDisabled"></el-table-column>
      <el-table-column label="确认" align="center" width="80">
        <template slot-scope="scope">
          <el-button  type="success" size="mini" :disabled="scope.row.confirm" 
            @click="confirmHandle(scope.row.pointId)"> 
            {{scope.row.confirm?'已确认':'确认'}}
         </el-button>
        </template>
      </el-table-column>
<el-table />

methods: {
      cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
        // console.log(row);
        // console.log(row.column);
        if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){
          return 'color:red'
        }else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
          return 'color:yellow'
        }
      }
    }

render-header自定义表头

<el-table-column prop="date" label="日期" sortable width="180" :render-header="renderHeaderDate">

renderHeaderDate(){
        return (<div style="position:relative;top:16px;left:2px;">
          <i class="el-icon-time"></i>
          <span>日期</span>
          </div>)
      },

效果

image.png

formatter 表格内容格式化

<el-table size="small" :data="TableData.lists" :header-cell-style="headerStyle" border style="width: 100%">
      <el-table-column :align="TableData.align" prop="offer_id" label="套餐ID" min-width="200"></el-table-column>
      <el-table-column :align="TableData.align" prop="offer_name" label="套餐名称" min-width="250"></el-table-column>
      <el-table-column :align="TableData.align" prop="price" label="套餐价格" min-width="140"></el-table-column>
      <!--绑定formatter-->
      <el-table-column :align="TableData.align" prop="effect_type" label="类型" :formatter="typeFormatter" 
         min-width="180">
      </el-table-column>
</el-table>

typeFormatter: function(row, column) {
      switch (row.effect_type) {
        case "0":
          return "当天有效";
          break;
        case "1":
          return "当月有效";
          break;
        case "2":
          return "季度有效";
          break;
      }
}

slot自定义列模板

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

效果

image.png

v-for循环渲染表格内容

      colunmName: ['澳中线-悉尼-仓库', '澳中线-悉尼-仓库1'],
      totalNumber: 100,
      data: [{
        list: [
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          },
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          }
        ],
        userName: 'admin'
      }, {
        list: [
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          },
          {
            name: '澳中线-悉尼-仓库1',
            value: 1
          }
        ],
        userName: 'jason'
      }]

以上是数据，下面遍历数据

    <el-table
        :data="data"
        border
        >
        <el-table-column
          prop="userName"
          :label="$t('user.username')"
        >
        </el-table-column>
        <!-- 自定义列的遍历-->
        <el-table-column v-for="(item, index) in colunmName" :key="index" :label="item" >
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
           <span>{{scope.row.list[index].value}}</span> <!--通过scope.row里面的数据来渲染表格内容-->
          </template>
        </el-table-column>
 
        
        </el-table-column>
        <el-table-column
          prop="Total"
          :label="$t('ad.totalNumber')"
          >
        </el-table-column>
    </el-table>

多级表头

image.png

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>

 tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]