ElementUI之table排序

elementui是一套很是好用的ui框架，常常用於與vue搭配使用。其中有一個table組件，如下對其排序屬性作下筆記。爲了簡潔我就寫在註釋裏了。

 

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.0.11/lib/index.js"></script>
<div id="app">
  <template>
  //table的默認排序方式是按ID排序 順序爲遞減 這裏能夠改爲其餘 好比 name age address
    <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'ID', order: 'descending'}">
    //設置sortable屬性時出現排序按鈕 數字爲首按數組大小進行排序
      <el-table-column prop="ID" label="座號" sortable width="180">
      </el-table-column>
      //名稱按符號--英文字母--拼音首字母排序 反之換序
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      //去掉sortable屬性時 該項沒法排序
      <el-table-column prop="age" label="年齡"  width="180">
      </el-table-column>
      <el-table-column prop="address" label="位置" :formatter="formatter">
      </el-table-column>
    </el-table>
  </template>
</div>

JavaScript部分：

 

 

var Main = {
    data() {
      return {
        tableData: [{
          ID: '12號',
          name: '李狗蛋',
          age:21,
          address: '廣州市科學城'
        }, {
          ID: '13號',
          name: '黃二狗',
          age:18,
          address: '汕頭市濠江區'
        }, {
          ID: '14號',
          name: '林二丫',
          age:19,
          address: '深圳市羅湖區'
        }, {
          ID: '15號',
          name: '陳大寶',
          age:20,
          address: '廈門市翔安區'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

效果圖