• Vue之sortable实现排序功能


    1.vue代码

    <template>
          <el-table @selection-change="handleSelectionChange" @sort-change="sortChange" v-loading="loading" id = "TableColumnID" element-loading-text="加载中..." :data="listData.List" highlight-current-row style=" 100%;">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column width="80" prop="UserName" label="登录名" :show-overflow-tooltip="true" sortable="custom"></el-table-column>
            <el-table-column width="80" prop="byName" label="姓名" :show-overflow-tooltip="true" sortable="custom"></el-table-column>
            <el-table-column :formatter="roleType" prop="Role" label="用户权限" :show-overflow-tooltip="true" sortable="custom" width="150"></el-table-column>
            <el-table-column prop="LastActivityTime" label="更新时间" sortable="custom" width="200"></el-table-column>
            <el-table-column prop="CreateTime" label="创建时间" sortable="custom" width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

    2.sort-change事件分析

    如果需要后端实现排序功能,需要将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。

    sort-change方法自带三个参数,分别代表意义是:
    column:当前列
    prop:当前列需要排序的数据
    order:排序的规则(升序、降序和默认[默认就是没排序])

    3.JS代码:

     data() {
        return {
          loading: false,
          listData: [],
          addVisible: false,
          currentObj: { U: {}, UAccount: {} },
          queryData: {
            UserName: "",
            CustomerCode: "",
            CustomerName: "",
            role: 0,
            p_Role: "",
            prop : "",
            order : "",
            currentPage: 1,
            pageSize: 10
          },
          EUserP_Role: [],
          p_Role: {},
          ids: []
        };
      },
     methods: {
        sortChange(column,prop,order){
          if(column.prop == null || column.order == null){
            this.queryData.prop = "";
            this.queryData.order = "";
          }else{
             this.queryData.prop = column.prop;
             this.queryData.order = column.order;
          }
          this.getList();
        },
        getList() {
          this.loading = true;
          this.$API.User.List(this.queryData).then(res => {
            this.loading = false;
            this.listData = res;
            this.currentPage = 1;
            this.prop = column.prop;
            this.order = column.order;
          });
        }

    参考---https://blog.csdn.net/nxw_tsp/article/details/86096914

  • 相关阅读:
    如何实现抢红包,100元6个用户抢,每个人抢的红包金额至少为10?
    秒杀项目中核心功能的实现
    如何判断一个单链表有环?
    Redis入门
    拼车
    微服务架构SpringCloud的理解
    Linux:移动当前目录的前N个文件到目标文件夹下
    Linux统计文件目录下文件的数目命令
    Python-目标检测-将xml文件转换成.txt文件
    Linux的命令合集
  • 原文地址:https://www.cnblogs.com/pwindy/p/14838236.html
Copyright © 2020-2023  润新知