表格的表现形式如下:

注意:该实例介绍的为根据“型号”进行排序,或者根据"创建时间"进行排序!!!

具体步骤如下:

1.创建table,绑定data,绑定列名prop,绑定监听事件sort-change

<el-table :data="tableData" border style="width: 100%" v-loading="loading" @sort-change="changeTableSort">
    <el-table-column label="编号" width="80">
        <template slot-scope="scope">{{scope.$index + 1}}</template>
    </el-table-column>
    <el-table-column prop="model" label="型号" width="180" :sortable="'custom'"></el-table-column>
    <el-table-column prop="modelName" label="产品名称" width="180"></el-table-column>
    <el-table-column prop="description" label="描述"></el-table-column>
    <el-table-column prop="createTime" label="创建时间" :sortable="'custom'"></el-table-column>
</el-table>

2.初始化列表数据tableData及加载状态loading

data() {
    return {
        tableData: [
            {
                model:2,
                modelName:"水浸",
                description:"ccc",
                createTime:"2019-07-17T06:55:14.000+0000"
            },
            {
                model:3442,
                modelName:"3443",
                description:"kkkk",
                createTime:"2019-07-17T06:54:49.000+0000"
            },
            {
                model:96478,
                modelName:"85745",
                description:"857856856",
                createTime:"2019-08-19T07:15:15.000+0000"
            }
        ],
        loading: true
    };
},

3.添加初始化加载列表事件getDeviceTypes()、实现监听事件changeTableSort()

注意:当进行排序的字段为时间格式时,要记得将其转换为时间戳的格式,才能进行大小比较哦

mounted() {
    this.getDeviceTypes();
},
methods: {
    //初始化加载列表
    getDeviceTypes() {
        this.loading = true;

        //将“创建时间”转换为所需的时间格式
        this.tableData.map(item => {
            item.createTime = this.$moment(item.createTime).format("YYYY-MM-DD HH:mm:ss");
        });

        this.loading = false;
    },

    //选择指定列进行排序
    changeTableSort(column){
        console.log(column);

        //获取字段名称和排序类型
        var fieldName = column.prop;
        var sortingType = column.order;

        //如果字段名称为“创建时间”,将“创建时间”转换为时间戳,才能进行大小比较
        if(fieldName=="createTime"){
           this.tableData.map(item => {
                item.createTime = this.$moment(item.createTime).valueOf();
           });
        }
            
            
        //按照降序排序
        if(sortingType == "descending"){
            this.tableData = this.tableData.sort((a, b) => b[fieldName] - a[fieldName]);
        }
        //按照升序排序
        else{
            this.tableData = this.tableData.sort((a, b) => a[fieldName] - b[fieldName]);
        }

        //如果字段名称为“创建时间”,将时间戳格式的“创建时间”再转换为时间格式
        if(fieldName=="createTime"){
            this.tableData.map(item => {
                item.createTime = this.$moment(item.createTime).format(
                     "YYYY-MM-DD HH:mm:ss"
                );
            });
        }
        
        console.log(this.tableData);
    }
}    

如有漏洞,欢迎评论互动指教!!!!!!!!!!!!!

 

 

 

 

 

 

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐