elementui el-table的sortable排序

最新推荐文章于 2024-09-06 15:18:12 发布

好好学习,

最新推荐文章于 2024-09-06 15:18:12 发布

阅读量4k

点赞数 1

分类专栏： elementui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_44957616/article/details/124710126

版权

elementui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

附上elementui的官网

安装elementui以及引入

安装

npm i element-ui -S

引入，在main.js中

全部引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入,创建elementui.js,在main.js中直接引入

elementui.js
import Vue from 'vue';
import 'element-ui/lib/theme-chalk/index.css';
import { Table, TableColumn } from 'element-ui';
Vue.use(Table);
Vue.use(TableColumn);

main.js
import "../plugins/elementui";

el-table排序

给el-table-column添加sortable属性

<el-table-column width="100" prop="name" label="账号" sortable> </el-table-column>

这个只是当前页面的排序，如果翻到下一页，排序还是默认的第二页的排序

如果排序需要用到后端去排序，需要将sortable的属性值设置为custom，
并且给el-table添加sort-change方法,
设置默认排序类型和默认以哪一列排序 :default-sort =“{‘prop’: prop,‘order’:type}”

排序的字符为prop，如果排序的字符和td显示的字符不一样，可以用template

<el-table-column width="100" prop="parent_name" label="组织" sortable='custom'>
   <template slot-scope="scope">
     <span>{{scope.row.organization.parents?cope.row.organization.parent.name:''}}</span>
   </template>
</el-table-column>

template
<el-table height="100%" v-loading="$store.state.loading" ref="table" @sort-change="onSortChange" :default-sort ="{'prop': prop,'order':type}" :data="dateTable">
   <el-table-column width="100" prop="parent_name" label="组织" sortable='custom'>
      <template slot-scope="scope">
        <span>{{scope.row.organization.parent?scope.row.organization.parent.name:''}}</span>
      </template>
   </el-table-column>
</el-table>

script
data() {
    return {
      currentPage3: 1,
      skip:0,
      limit:10,
      prop:'created',
      type:'desc',
    }
  },
methods:{
	onSortChange({ prop, order }) {
      console.log(prop,order,this.currentPage3);
      order=='descending'?this.type='desc':''
      order=='ascending'?this.type='asc':this.type='desc'
      this.prop=prop
      this.$axios({
        method: this.COMMON.btnModule.account[0].methods,
        url: this.APIurl.apiUrl+this.COMMON.btnModule.account[0].path,
        params: { 
          skip: (this.currentPage3-1)*this.limit,
          limit: this.limit,
          order: this.prop,
          type: this.type,
        },
      })
      .then((res) => {
        console.log( res.data.datas,res.data.datas.length);
        this.$store.commit('setTableData',res.data)
      })
    },
}