Element Table常用设置：排序、自定义序列、列表汇总、设置斑马线

最新推荐文章于 2024-10-06 20:22:50 发布

情谜⅔

最新推荐文章于 2024-10-06 20:22:50 发布

阅读量1.5w

点赞数 4

分类专栏： Element Ui相关基础设置

本文链接：https://blog.csdn.net/qq_39923762/article/details/82880496

版权

Element Ui相关基础设置专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<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;
        }
    }
}