Element-ui相关总结笔记

一、el-table标签

        可以绑定data来实现对数据的动态更新

                    <el-table :data="items.data">
                        <el-table-column prop="name" label="11" width="140">
                        </el-table-column>
                        <el-table-column prop="genetation" label="22" width="120">
                        </el-table-column>
                        <el-table-column prop="count" label="33">
                        </el-table-column>
                    </el-table>

        js：

new Vue({
  el:"#app",
  data() {
    return {
      message: {
        name:'123'
      },
      items: {
        data: []
      }
    }
  }

二、分页<el-pagination>

                    <el-pagination background 
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-count="pagecount"
                        :page-size="pagesize"
                        layout="total, prev, pager, next" 
                        :total="total">
                    </el-pagination>

js:

data() {
    return {
      currentPage: 1,
      pagesize: 5,
      total: 20,
      pagecount: 20
    }
methods: {
    listInfo: function () {
      this.isTableShow=true;
      this.isChartShow=false;
      var that = this;
      axios({
        methods: "GET",
        url: `${api_name}/station/info/${that.currentPage}/${that.pagesize}`
      }).then(res => {
        that.items.data = res.data.data;
      })
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      this.listInfo();
    }
  }