SOURCE

new Vue({
  el:'#app',
   data() {
      return {
        tableData: [{
          date: '2020-05-01~2020-05-31',
          name: '高兴',
          name2: '充电宝',
          num:19,
          address: '锦江宾馆'
        }, {          date: '2020-05-02 14:00:00',
          name: '叮叮当',
          name2: '旅行包',num:19,
          address: '一号航站楼'
        }, {
          date: '2020-05-02 14:00:00',
          name: '1539008xxxx',
          name2: '单反相机',num:19,
          address: '东客站'
        }, {
          date: '2020-05-02 14:00:00',
          name: '阿旺',
          name2: '钢笔',num:19,
          address: '一号航站楼'
        }],input:"",
        sortData: {prop: 'date', order: 'descending'}
      }
    },
  	mounted(){
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      sortChange(val){
        const { order } = val
        console.log(order)
      }
    }
})

<div id="app">
    <br/><br/>
	<el-row>
		<el-col :span="8">
			<div class="grid-content bg-purple">
				<el-input v-model="input" placeholder="请输入物品名称"></el-input>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content bg-purple">
				<el-button>查询</el-button>
			</div>
		</el-col>
		<el-col :span="2">
			<div class="grid-content bg-purple">
				<el-button type="warning">未处理</el-button>
			</div>
		</el-col>
        <el-col :span="2">
			<div class="grid-content bg-purple">
				<el-button type="warning">已处理</el-button>
			</div>
		</el-col>
	</el-row>
	<br/>
		<template>
			<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" @sort-change="sortChange">
				<el-table-column  prop="name" label="会员名称" sortable>
                </el-table-column>
                <el-table-column label="投诉建议类型" :formatter="formatter">
                    <template slot-scope="scope">
                        投诉
                    </template>
                </el-table-column>
				<el-table-column label="投诉建议项目" :formatter="formatter">
                    <template slot-scope="scope">
                        机场服务水平
                    </template>
                </el-table-column>
                <el-table-column label="投诉建议时间" :formatter="formatter">
                    <template slot-scope="scope">
                        2020-05-02 14:00:00
                    </template>
				</el-table-column>
                <el-table-column label="当前状态" :formatter="formatter">
                    <template slot-scope="scope">
                        未处理
                    </template>
				</el-table-column>
				<el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small">处理</el-button>
                    </template>
				</el-table-column>
			</el-table>
		</template>
        <el-pagination 
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20">
    </el-pagination>
</div>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://lib.baomitu.com/vue/2.5.17/vue.js">

</script>
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>

button{
    margin-left: 10px
}