index.vue

<template>
  <main class="list_container">
    <section class="search_bar">
      <el-form :inline="true" :model="queryForm" size="small" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="queryForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="发布日期">
          <el-date-picker v-model="queryForm.pushlishTime" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchController">查 询</el-button>
          <el-button @click="searchController">重 置</el-button>
        </el-form-item>
      </el-form>
      <div class="operation_bar">
        <el-button type="primary" size="small" icon="el-icon-plus">新建</el-button>
        <div v-if="isEditSwitch">
          <span class="switch_time">
            切换时间
            <el-input size="small" v-model="editSwitchTime"></el-input>
            秒
          </span>
          <el-button type="primary" size="small" @click="switchTimeConfirm">确定</el-button>
          <el-button size="small" @click="isEditSwitch = false">取消</el-button>
        </div>
        <div v-else>
          <span class="switch_time">切换时间{{swichTime}}秒</span>
          <el-button type="primary" size="small" @click="switchTimeEdit">编辑</el-button>
        </div>
      </div>
    </section>
    <section class="list_content">
      <div class="table_wrap">
        <el-table :data="tableData" size="small" style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
          <el-table-column prop="date" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="name" label="标题" width="165">
          </el-table-column>
          <el-table-column prop="address" label="缩略图" width="165">
          </el-table-column>
          <el-table-column prop="address" label="排序" width="165">
          </el-table-column>
          <el-table-column prop="address" label="发布" width="165">
          </el-table-column>
          <el-table-column prop="address" label="启用">
            <template slot-scope="scope">
              <el-switch v-model="scope.status" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                编辑
              </el-button>
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination_wrap">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize" layout="slot, prev, pager, next" :total="totalItems">
          <span class="total_items">共{{totalItems}}条记录</span>
          <span class="current_page">{{currentPage}}/{{totalPages}}页</span>
        </el-pagination>
      </div>
    </section>
  </main>
</template>
<script>
export default {
  name: 'CarouseManage',
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems/this.pageSize)
    }
  },
  data() {
    return {
      isEditSwitch: false,
      swichTime: 3,
      editSwitchTime: 0,
      queryForm: {},
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 2,
      headerStyle: {
        background: '#FAFAFA',
        color: '#101010',
        textAlign: 'center',
        fontSize: '14px'
      },
      cellStyle: {
        textAlign: 'center',
        fontSize: '14px'
      }
    }
  },
  methods: {
    searchController() {

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    switchTimeEdit() {
       this.editSwitchTime = this.swichTime
      this.isEditSwitch = true
    },
    switchTimeConfirm() {
      this.swichTime = this.editSwitchTime
      this.isEditSwitch = false
    }
  }
}
</script>
<style lang="scss" scoped>
.list_container {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 30px;
  .el-button--small {
    border-radius: 5px;
    // font-size: 14px;
    // padding: 0px 15px;
    // line-height: 30px;
  }
  .operation_bar {
    margin: 10px 0;
    display: flex;
    .switch_time {
      margin: 0 15px;
      .el-input {
        display: inline-block;
        width: 50px;
      }
    }
  }
  .el-table {
    border: 1px solid #dfe6ec;
    border-bottom: none;
  }
  .pagination_wrap {
    text-align: right;
    margin-top: 15px;
    .el-pagination {
      padding: 0;
      span {
        font-size: 14px;
        margin-right: 10px;
        // &.current_page {
        //   margin-right: 20px;
        // }
      }
      ::v-deep .el-pager {
        li {
          border: 1px solid #d8d8d8;
          border-radius: 5px;
          margin-right: 8px;
          &.active {
            background-color: #177ec6;
            border-color: #177ec6;
            color: #ffffff;
          }
        }
      }
      ::v-deep.btn-prev,
      ::v-deep.btn-next {
        border: 1px solid #d8d8d8;
        border-radius: 5px;
        padding: 0 10px;
        &.btn-prev {
          margin-right: 8px;
        }
      }
    }
  }
}
</style>