<template><Panel title="商品分类"><el-button slot="btn">添加商品</el-button><el-table :data="list"><el-table-column label="ID" prop="id"></el-table-column>  <el-table-column label="分类名"><template slot-scope="scope"><el-input v-if="scope.row.isEdit" v-model="scope.row.cateName"></el-input>  <span v-else>{{ scope.row.cateName }}</span>  </template></el-table-column><el-table-column label="是否启用" prop="state"><!-- 作用域插槽 --><template slot-scope="scope"><el-switch :disabled="!scope.row.isEdit" v-model="scope.row.state" :active-value="1" :inactive-value="0"></el-switch></template></el-table-column><el-table-column><template slot-scope="scope"><!-- isEdit为false 代表查看状态  页面显示编辑按钮    true 表示处于编辑状态  完成按钮 --><el-button v-if="!scope.row.isEdit"  size="mini" @click="scope.row.isEdit = true">编辑</el-button><el-button v-else size="mini" type="success" @click="editType(scope.row)">完成</el-button></template></el-table-column></el-table><el-pagination:total="total":current-page.sync="pageInfo.currentPage":page-size.sync="pageInfo.pageSize"></el-pagination></Panel>
</template><script>
import { goodsCatelistApi, goodsEditcateApi } from "../../api/goods.api";
export default {data() {return {pageInfo: {currentPage: 1,pageSize: 5},list: [],total: 0};},methods: {editType(row) {// 发起一个请求goodsEditcateApi(row).then(res => {if(res.data.code === 0) {this.$message.success('修改成功！！')row.isEdit = false}})},getList() {goodsCatelistApi(this.pageInfo).then(res => {// 1. 给每一项加一个isEditthis.list = res.data.data.map(item => {item.isEdit = falsereturn item});this.total = res.data.total;});}},watch: {pageInfo: {handler() {this.getList();},deep: true,immediate: true}}
};
</script><style lang="scss" scoped>
</style>