记录vue+element UI表格常用的各种操作和属性

包括：（代码中都有具体用法）

固定列和表头： fixed

表格的最大高度： max-height

高亮当前行： highlight-current-row

首列增加索引： type="index"   自定义索引的话再加   :index="indexMethod"

删除行： deleteRow

某一行/单元格 添加 class： row-class-name / cell-class-name

管理选中行时触发的事件： @current-change="handleCurrentChange"

选中某行：setCurrentRow

多选： type="selection" （具体看element官网）

排序：sortable

格式化指定列的值：formatter

 

在表格里插入其他元素：Scoped slot （可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据）

添加合计行： show-summary， 具体合计的方法再添加  :summary-method="getSummaries"

单元格/行的样式： cell-style   row-style

单元格/行的点击等事件看官网即可

代码：

 

<template>
<div>
  <el-table
    :data="tableData"
    ref="singleTable"
    style="width: 100%"
    max-height="250"
    :row-class-name="tableRowClassName"
    highlight-current-row
    @current-change="handleCurrentChange"
    :default-sort = "{prop: 'date', order: 'descending'}"
    show-summary
    :summary-method="getSummaries"
    :cell-style="setCellStyle">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      type="index"
      :index="indexMethod"
      width="50">
    </el-table-column>
    <el-table-column
      fixed
      sortable
      prop="date"
      label="日期"
      width="150">
      <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
      sortable
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <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"
      :formatter="formatter">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[2])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
  </div>
  <!-- <svg-icon iconClass="phone"></svg-icon> -->
</div>

</template>
<script>
export default {
  methods: {
    indexMethod (index) {
      return index * 2
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    // 设置列样式
    setCellStyle ({row, column, rowIndex, columnIndex}) {
      if (column.property === 'city') return 'color: #409EFF;cursor:pointer;'
    },
    formatter (row, column) {
      if (row.zip === 200334) {
        console.log(row, column)
        // row.zip = 1   // 要return才能实现
        return 1
      } else {
        return 200333
      }
    },
    getSummaries (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 (!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
    }
  },
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200334,
        amount1: '234'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        amount1: '165'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        amount1: '324'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        amount1: '621'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        amount1: '539'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        amount1: '539'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        amount1: '539'
      }],
      currentRow: null
    }
  }
}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

　　附一张效果图，有点丑：