admin-cms-1/src/layout/record/messageInfo.vue

<template>
  <div id="messageInfo">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="top">
          <el-col :span="12" class="topTitle">
            <span>信息列表</span>
          </el-col>
          <el-col :span="12" class="topAdd">
            <el-button type="primary" size="mini" @click="addData()"><i class="el-icon-plus"></i></el-button>
          </el-col>
        </el-col>
        <el-col :span="24" class="list">
          <template>
            <el-table :data="message" style="width: 100%">
              <el-table-column prop="title" label="标题" align="center"> </el-table-column>
              <el-table-column prop="column_name" label="所属栏目" align="center"> </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="$router.push({ path: '/record/messageInfoDetail', query: { id: scope.row.id } })"
                    ><i class="el-icon-edit"></i
                  ></el-button>
                  <el-button type="text" size="small" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24" class="page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </el-col>
          </template>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'messageInfo',
  props: {
    message: null,
    total: null,
  },
  components: {},
  data: () => ({
    currentPage: 1,
  }),
  created() {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    addData() {
      this.$router.push({ path: '/record/messageInfoDetail' });
    },
    handleDelete(item) {
      this.$emit('delete', item);
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  padding: 15px 0;
  border-bottom: 1px solid #cccc;
}
.top .topTitle {
  padding: 0 10px;
}
.top .topAdd {
  padding: 0 10px 0 0;
  text-align: right;
}
.page {
  padding: 20px 0;
  text-align: center;
}
</style>