Vue頁面實現卡片式列表

<template>
  <div>
    {{allUserList}}
    {{date11 | dateFormat(date11)}}
    <el-row>
      <el-col :span="12" v-for="(value, index) in allUserList" :key="index" style="padding: 25px; ">
<!--        :offset="index > 0 ? 2 : 0"-->
        <el-card  >
          <div style="padding: 14px; font-size: 18px">
            <el-row>
              <el-col :span="12">
                <span>編號：{{index}}</span>
              </el-col>
              <el-col :span="12" style="padding-right: 1px">
<!--                overflow-wrap:break-word TODO 可以讓span 標簽分行-->
                <span style="overflow-wrap:break-word;">用戶ID：{{value.id}}</span>
              </el-col>
            </el-row>

            <span v-if="value.username !== null ">姓名：{{value.username}}<br></span>
            <span>部門ID：{{value.deptId}}</span><br>
            <span>角色ID：{{value.roleId}}</span><br>
            <div>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="地址">
                </el-table-column>
              </el-table>
            </div>
            <div class="bottom">
              <el-button type="text" class="button">操作按鈕</el-button>
              <a href="#" @click.prevent="some">some</a>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :current-page.sync="listQuery.pageNum"
        :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
  };
    export default {
      name: "demo01",
      filters:{
        dateFormat(date11){
          if (date11 != null){
            var date = new Date(date11);//時間戳為10位需*1000，時間戳為13位的話不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
            var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
            var strDate = Y+M+D+h+m+s;
            return strDate;
          }
        },
      },
      data() {
        return {
          dateList:[
            1595877497000,
            1595877497200,
            1595877437000,
            1595877637000,
            1495872497000,
          ],
          date11:1595877497000,
          adminUrl:this.common.adminUrl,
          preUrl:this.common.preUrl,
          currentDate: new Date(),
          allUserList:{},
          total:0,
          listQuery: Object.assign({}, defaultListQuery),
          requestData :{
            username:'',               //# 輸入框輸入的用戶名
            roleId: 0,                   // # 角色編號
            pageNum:'',                  //# 當前頁
            pageSize:''
          },
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀區金沙江路 1516 弄'
          }]
        };
      },
      created() {
        //  獲取 所有用戶列表
        this.getAllUser();
      },
      mounted() {
        // this.timer = setInterval(this.getAllUser, 3000);
      },
      methods: {
        some(){
          this.tableData.some((item,index) => {
            console.log(index);
            if (item.address === "上海市普陀區金沙江路 1519 弄") {
              console.log('這是第' + index + "個");
              return false;
            }
          })
        },
        // 獲取所有用戶列表
        getAllUser() {
          this.allUserList = '';
          this.listLoading = true;
          this.requestData.username = this.username;
          this.requestData.pageNum = this.listQuery.pageNum;
          this.requestData.pageSize = this.listQuery.pageSize;
          var _this = this;
          this.$axios({
            withCredentials: false,
            Accept: "application/json, text/plain, */*",
            contentType:"application/jsonp;charset=utf-8",
            url: this.preUrl + '/acl/user/get/',
            method: 'post',
            data: (this.requestData),
          }).then(function (response) {
            _this.allUserList = response.data.data.list;
            _this.total = response.data.data.total;
            _this.listLoading = false;
          }).catch(err => {
            console.log(err);
          });
          // setTimeout(this.getAllUser,10000)
        },
        // 改變頁面
        handleSizeChange(val) {
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getAllUser();
        },
        // 這是點擊到幾頁跳轉
        handleCurrentChange(val) {
          this.listQuery.pageNum = val;
          //
          console.log(val,'val');
          console.log(this.listQuery)
          this.getAllUser();
        },

      },
    }
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 14px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>

　　直接把代碼粘貼了，主要代碼是。

效果如下，