1. 程式人生 > >Element Table常用設定:排序、自定義序列、列表彙總、設定斑馬線

Element Table常用設定:排序、自定義序列、列表彙總、設定斑馬線

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
  • <el-table
        :data="tableData2"
        style="width: 100%"
        :summary-method="getSummaries1"   //彙總
        show-summary    //表尾是否顯示彙總
        :default-sort = "{prop: 'date', order: 'descending'}"   //設定預設排序列
        :row-class-name="tableRowClassName">    //自定義斑馬線
            <el-table-column
            label="序列"
            type="index"
            width="180"
            :index="indexMethod">
            </el-table-column>
            <el-table-column
            prop="date"
            label="日期"
            sortable>
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名">
            </el-table-column>
            <el-table-column
            prop="account"
            :sortable='true'
            :sort-method="sortChange1"
            label="賬戶金額">
            </el-table-column>
     </el-table>
    export default {
        data(){
            return{
                tableData2: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    account:2000
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    account:1996.36
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    account:10263.9
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    account:862
                }],
                totalamount:15157.9,   //分頁獲取的彙總值
            }
        },
        methods:{
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            sortChange1(a,b) {  //排序
                return a.account-b.account
            },
            getSummaries1(param) {  //設定彙總
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    sums[0]='彙總';
                    sums[2]=this.totalamount
                });
                return sums;
            },
            indexMethod(index) {  //設定序列號
                return 'row'+index;
            }
        }
    }