一购笆、常用屬性

1、border：給表格加邊框
2虚循、height：可實現(xiàn)固定表頭的表格同欠，不需要額外的代碼
3样傍、fixed：接受 Boolean 值left或者 right，表示左邊固定還是右邊固定
4铺遂、show-overflow-tooltip：當(dāng)內(nèi)容過長被隱藏時顯示 tooltip(文字提示)
5衫哥、header-cell-style：表頭單元格的 style 的回調(diào)方法，改變表頭背景色等
6襟锐、row-class-name：改變某行的背景色
7炕檩、cell-style：改變某列或者某單元格的背景色,文字顏色

二、常用方法事件

1捌斧、selection-change：當(dāng)選擇項發(fā)生變化時會觸發(fā)該事件
2笛质、cell-mouse-enter：當(dāng)單元格 hover 進入時會觸發(fā)該事件
3、row-click：當(dāng)某一行被點擊時會觸發(fā)該事件

圖例

image.png

<template>
 <div style="padding:20px">
     <el-table
         :data="tableData" style="width: 100%" height="400" border ref="refTable"
         :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
          @selection-change="handleSelectionChange"
          @cell-mouse-enter="hoverCall"
          @row-click="handleRowClick"
          :row-class-name="tableRowClassName"
          :cell-style="cellStyle"
      >
      <el-table-column type="selection" width="55" fixed="left" />
      <el-table-column prop="date"  label="日期"  min-width="110" show-overflow-tooltip/>
      <el-table-column prop="name" label="姓名" min-width="280" show-overflow-tooltip/>
      <el-table-column prop="address" label="地址" min-width="480" show-overflow-tooltip/>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"  type="primary" size="small">查看</el-button>
        </template>
        </el-table-column>
    </el-table>
 </div>
</template>
<script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1518 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1517 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1519 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          },{
            date: '2016-05-05',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          },{
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          },{
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          },{
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          },{
            date: '2016-05-09',
            name: '王小虎',
            address: '上海市普陀區(qū)金沙江路 1516 弄'
          }],
          tableSelect:[],//表格選中列表
        }
      },
      methods:{
            handleClick(row){},
            handleSelectionChange(val){//多選
                this.tableSelect = val;
            },
            hoverCall: function(row, column, cell, event) {//滑動選中
                if (event.which == 1) {
                    this.$refs.refTable.toggleRowSelection(row);
                }
            },
            handleRowClick(row, column, event) {//點擊行觸發(fā)捞蚂，選中或不選中復(fù)選框
                this.$refs.refTable.toggleRowSelection(row);
            },
            tableRowClassName({ row, rowIndex }) {//改變某行的背景色
                if (row.date == "2016-05-04" ) {
                    return "freeze";
                }
            },
            cellStyle({row, column, rowIndex, columnIndex}){
                if(columnIndex === 1 && row.date=='2016-05-03'){// 改變某單元格的背景色及文字顏色
                    return 'background:pink;color:green !important'  
                }else if(columnIndex === 1 && row.date=='2016-05-05'){ // 改變某單元格文字顏色
                    return 'color:blue !important'  
                } else if(columnIndex === 2 ){//指定列號  改變某列的背景色
                    return 'background:#a6a6a6' 
                }
                else{
                    return ''  
                } 
            }  
      }
    }
  </script>
  <style>
  /* 修改表格默認高度  */
    .el-table th,
    .el-table td {
        padding: 0 !important;
        height: 40px !important;
        line-height: 40px !important;
    }

    .el-table th {
        padding: 3px 0px !important;
    }

    .el-table__header tr,
    .el-table__header th {
        padding: 0 !important;
        height: 40px !important;
        line-height: 40px !important;
    }

    .el-table__body tr,
    .el-table__body td {
        padding: 0 !important;
        height: 40px !important;
        line-height: 40px !important;
    }

    /* 改變表格整行的背景色 */
    .el-table .freeze {
     background: #F5A623;
    }

  </style>

結(jié)語：今天是努力總結(jié)的一天 fighting８狙骸！姓迅！

image.png