tjshop/shop/static/manager/src/components/page/faq/FAQManage.vue

<template>
    <div>
        <el-select v-model="status">
            <el-option value="-1" label="全部"></el-option>
            <el-option value="1" label="在线"></el-option>
            <el-option value="0" label="离线"></el-option>
        </el-select>
        <el-button type="primary" @click="getItems">查询</el-button>
        <el-button type="primary" @click="goAdd">添加</el-button>
        <el-table :data="items">
            <el-table-column label="问题" prop="question"></el-table-column>
            <el-table-column label="答案" prop="answer"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <template v-if="scope.row.status === 1">
                        <p class="online">启用</p>
                    </template>
                    <template v-else>
                        <p class="offline">禁用</p>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background layout="total, prev, pager, next,jumper" @current-change="nextPage" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      items: [],
      status: '-1',
      page: 1,
      pageSize: 20,
      totalCount: 0
    }
  },
  methods: {
    goAdd: function() {
        var row = {id:0}
        this.goEdit(row)
    },
    getItems: function() {
      this.$http
        .getAllFaq(
          { status: this.status, page: this.page, pageSize: this.pageSize },
          this
        )
        .then(res => {
          if (res.code === 0) {
            this.items = res.obj.list
            this.totalCount = res.obj.totalCount
          }
        })
    },
    nextPage: function(currentPage) {
      this.page = currentPage
      this.getItems()
    },
    goEdit: function(row) {
      this.$router.push({ path: '/editFAQ', query: { id: row.id } })
    }
  },
  mounted: function() {
    this.getItems()
  }
}
</script>

<style>
.page {
  margin-top: 10px;
  text-align: center;
}
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
</style>