xx分类完善

1.1 分页

//更改页码时执行
changePage(val) {
  this.page=val;
  this.getData();
},

1.2 修改分类

原地修改的思想：在表格单元格中生成两个标签，一个用于显示，一个用于修改，根据编辑状态决定要显示哪个标签。

关键点：编辑状态（由于读取的数据中没有编辑状态，所以需要自己添加一个 editState）

this.tableData =  res.data.data.map(v=>{
  v.editState=false; //在数组中所有的对象上添加一个属性 editState 用于表示修改状态
  return v;
});

数据表格中设置两套标签：

<el-table :data="tableData" style="width: 100%">
  <el-table-column label="序号" width="80" prop="id"></el-table-column>
  <el-table-column label="分类名称" width="180">
    <template slot-scope="scope">
      <el-input v-if="scope.row.editState" v-model="scope.row.cateName"></el-input>
      <span v-else>{{scope.row.cateName}}</span>
    </template>
  </el-table-column>

  <el-table-column label="是否启用" width="120">
    <template slot-scope="scope">
      <el-switch :disabled="!scope.row.editState" v-model="scope.row.state" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ccc"></el-switch>
    </template>
  </el-table-column>

  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button v-if="scope.row.editState" size="mini" @click="edit(scope.row)" type="success">完成</el-button>
      <el-button v-else size="mini" @click="scope.row.editState=true">编辑</el-button>
      <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

1.3 删除分类

async del(row) {
  let res = await delCate({id: row.id});
  if(res.data.code===0){
    this.getData();
  }
},