vue页面基本增删改查

练手项目vue页面

新手前端轻喷：
效果如下
在这里插入图片描述
1、2两个部分组成：
对应代码中 element-ui中的 el-form 和 el-table

照着抄呗，硬着头皮来！
建议：认真读一遍你用的组件

在这里插入图片描述
那上边简单得列表举例：
建议大家手敲一个最简单的：

可能出现的坑点

1、js语句没有写道script标签内。
2、自定义方法没有写道method:{}中
3、在funtion(){}中调用this方法和在（）=>{}中调用this的this不是一个对象，
4、标签拼错了比如 prop敲成porp

在这里插入图片描述

<template><div class="app-container"><!-- <el-form size="small" :inline="true" label-width="100px"></el-form> --><el-table style="width: 100%;" :data="lunboList"><el-table-column label="序号" type="index" align="center"></el-table-column><el-table-column label="轮播图id" align="center" prop="imageId" /><el-table-column label="图片" align="center" prop="imageUrl" :show-overflow-tooltip="true"><template slot-scope="{row}"><el-image :src="row.imageUrl" style="width: 160px; height: 90px;"></el-image></template></el-table-column><el-image :src="imageUrl"></el-image><el-table-column label="备注" align="center" prop="remark" /><el-table-column label="状态" align="center" prop="status" key="status" ><template slot-scope="scope"><el-switchv-model="scope.row.status":active-value=1:inactive-value=0@change="handleStatusChange(scope.row)"></el-switch></template></el-table-column></el-table></div></template>

上边的问题3：[最早的代码是then(function(){}) 但这是不对的]
在这里插入图片描述

<script>import {getLunbolist,updateLuobo} from '@/api/school/common'export default {name: "",data() {return {lunboList: [{imageUrl:"",remark:"",status: 0}],}},created() {this.getLunboList();},methods:{// 用户状态修改handleStatusChange(row) {console.log("修改后row传入数据",row)let imageId = row.imageId;let text = row.status === "1" ? "启用" : "停用";this.$modal.confirm('确认要"' + text + '""' + row.imageId + '"记录吗？').then(()=> {return this.changeLunboStatus(row.imageId, row.status);}).catch((error)=>{console.log("出现错误",error)}).then(() => {this.$modal.msgSuccess(text + "成功");}).catch(function() {row.status = row.status === "0" ? "1" : "0";});},// 获取lunbo列表getLunboList() {console.log("qqqqqqqqqqqqqqqqqqqqqqqq")getLunbolist().then(res=>{console.log(res);this.lunboList = res.rows;})},changeLunboStatus(imageId,status){console.log("修改轮播status",imageId,status)let data ={imageId:imageId,status:status}console.log("修改轮播status组装数据data",data)updateLuobo(data).then(res=>{this.getLunboList()})}},};
</script><style scope>
</style>