• 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

  • 相关阅读:
    0 Explore TreeView
    按钮颜色选择器
    颜色组合框
    Get Files from Directory
    05.0 图片
    WINAPI 变量(2861个)
    为字符串增加50个空格
    让DataGridView显示行号
    相对路径
    SpecialFolder
  • 原文地址:https://www.cnblogs.com/pwindy/p/14838236.html
Copyright © 2020-2023  润新知