Daily distal recorded custom table dropdown

<template>
  <div class="hello">
     <el-form  inline size="small">
          <el-form-item label="学校">
                 <el-select v-model="title" multiple  filterable clear placeholder="请选择"  style="position: relative;width: 428px;">
                   <el-option v-for="(item,index) in livelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                   <div class="text-center" style="position:absolute;background: #fff;height:36px;bottom:0;z-index:1000;left:0;width:100%;">
                        <el-pagination
                          background
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="currentPage"
                             :page-sizes="pageSizeOpts"
                             :page-size="pageSize"
                             layout="total, sizes, prev,slot,next, jumper"
                             :total="total">
                             <span class="current-number">{{currentPage}}</span>
                           </el-pagination>
                   </div>
                 </el-select>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      livelist:[],
      title:[],
      currentPage: 1,
      pageSize: 10,
      pageSizeOpts: [10, 15,20],
      total:0,
    }
  },
  created(){
    var that=this;
    that.getLiveList();
  },
  methods: {
       handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          var that=this;
          that.pageSize=val;
          that.currentPage=1;
          that.getLiveList();
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          var that=this;
          that.currentPage=val;
          that.getLiveList();
        },
        searchLive(){
          var that=this;
          that.currentPage=1;
          that.getLiveList();
        },
        getLiveList(){
          var that=this;
          let datalist = [];
          let param = {
          	page: that.currentPage,
          	size: that.pageSize,
          	cid: '0',
          	title: that.title,
          	status:'all'
          };
          that.$http.get("/admin/listmlive/", {
          	params: param
          }).then(function(res) {
              console.log(res);
              if(res.data.status == 'yes') {
              	var list = res.data.livelist;
              	for(let i = 0; i < list.length; i++) {
              		datalist.push(list[i]);
              	}
              } else {
              	datalist = [];
              }
              that.total= res.data.count;
              that.livelist=datalist;
          }).catch(function(err) {
          	console.log(err)
          })
        }
      }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display:block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<style>
.el-select-dropdown__wrap{
    max-height: 360px!important;
}
.current-number{text-align: center;color:#007AFF}
</style>