vue+element PC常用

<!-- Vue SFC -->
<template>
  <div class="my-self-table">
    <div class="container">
      <div class="handle-box" style="margin-bottom: 20px;">
        <!-- 按钮区 -->
        <el-input class="mr10 v-top" style="width:200px;" v-model="searchText" placeholder="请输入内容"></el-input>
        <el-button type="primary" @click="searchTextFn">搜索</el-button>
      </div>
      <div style="min-height:200px">
        <!-- el-table -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" prop="date" label="日期" width="150"></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            align="center"
            prop="name"
            label="姓名"
            width="120"
          ></el-table-column>
          <el-table-column align="center" prop="address" label="地址"></el-table-column>

          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- page -->
        <div class="pagination" v-show="!loading">
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper "
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.index"
            :page-size="page.size"
            :total="page.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Req_getToken } from "@/api/user";
export default {
  name: "SetQuota",
  components: {},
  data() {
    return {
      searchText: "",
      loading: false,
      page: {
        index: 1, //当前页
        size: 10, //每页条数
        total: 0 //总条数
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎呜呜呜呜呜呜呜呜呜呜呜我无无",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 获取数据
    async getData() {
      // let user = this.$store.state.user.userinfo;
      let datVal = {};
      // console.log(datVal)
      // this.loading = true;
      // const result = await Req_getToken(datVal);
      //  console.log(result)
      // this.loading = false;
    },
    // 搜索
    searchTextFn(){
      // this.searchText
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange: function(val) {
      this.page.index = 1;
      this.page.size = val;
      this.getData();
    },
    handleCurrentChange: function(val) {
      this.page.index = val;
      this.getData();
    }
  }
};
</script>
<style scoped>
.my-self-table .el-table__header {
  width: 100% !important;
}
.my-self-table .el-table__body {
  width: 100% !important;
}
.handle-box {
  margin-bottom: 20px;
}
</style>