vue+element踩坑记-Table基本的CURD操作
vue+element踩坑记-Table基本的CURD操作
写在前面
几天没更新博客了，也是着实没时间，但凡有点时间我都会及时更新的，最近项目也是相对比较着急的，所以一直没有抽出时间做一些vue的记录，今天我这里简单的将我们最常用的Table的增（create）删（delete）改（update）查（retrieve），也就是我们常说的CURD的操作记录一下怎么玩的！写的比较浅显，作为一个初学者的使用心得！
首先是查，查是最常用的没有之一那么也是比较简单的一种。
没有写js之前先把基本的table画的H5贴出来，这样看下面的js的字段的时候我们才可以看的明白：
<el-table
:data="tableDataBuilding"
size="mini"
:header-cell-style="{background:'#303A41',color:'white'}"
style="width: 100%;margin-top: 10px">
<el-table-column
prop="code"
fixed
label="代码"
width="140">
</el-table-column>
<el-table-column
prop="code_name"
label="代码名称"
width="140">
</el-table-column>
<el-table-column
prop="create_datetime"
label="创建时间"
width="170">
</el-table-column>
<el-table-column
prop="create_user"
label="创建用户">
</el-table-column>
<el-table-column
prop="descript"
label="描述">
</el-table-column>
<el-table-column
prop="descript_en"
label="英文描述">
</el-table-column>
<el-table-column
prop="is_halt"
label="是否停用">
<template slot-scope="scope">
<span v-if="scope.row.is_halt === true">是</span>
<span v-else>否</span>
</template>
</el-table-column>
<el-table-column
prop="modify_date"
label="更新日期"
width="170">
</el-table-column>
<el-table-column
prop="modify_user"
label="更新用户">
</el-table-column>
<el-table-column
prop="parent_code"
label="父节点"
width="140">
</el-table-column>
<el-table-column
prop="building_name"
label="楼栋">
</el-table-column>
<el-table-column
fixed="right"
prop="address"
label="操作"
width="150">
<template slot-scope="scope">
<el-button
size="mini"
@click="dialogVisibleLd =true; EditeInfoLd(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDeleteLd(scope.$index, scope.row,tableDataBuilding)">删除</el-button>
</template>
</el-table-column>
</el-table>先看效果：
我们一般的查询分为几种，第一种是默认的页面进入的时候的查询，那么其实这个查询是不需要任何的条件的，也就是在我们的vue的create的方法里面实现的一种：
查询
created : function(){
let that = this;
let url = '您自己的查询接口';
that.$axios({
method : 'get',
url : url,
params:{
page : that.currentPage,
page_size : that.pagesize
}
}).then(function (res) {
that.total = res.data.data.count;
that.tableDataBuilding = res.data.data.results;
}).catch(function (err) {
console.info(err);
})
},那么会这种的话，基本的条件查询也只是一样的，只是说我们传递的参数是不一样的，最后的处理的方式都是一样的，后端会返回给我们查询到的结果，那么我们需要做的就是将拿到的结果重新给table赋值一下就可以的，也就是这一行的操作：
that.tableDataBuilding = res.data.data.results;那么这个tableDataBuilding就是我们需要绑定的表格，也就是element组件：data绑定的表格数据！其实查询本身是一门很深的学问，百度就是搜索引擎起家的，但是我们平常使用的查询是很简单和基本的一些条件信息过滤，所以不会很难，这里就不做过多的解释。
增加
一个新的数据怎么来的，都是靠用户增加来的，那么增加就是给数据库进行create的操作，我们前端需要做的就是给用户画一个可以操作的界面，然后将用户输入的数据拿到，做一些基本的数据的合理性判断，然后给后端进行数据库的新增。所以这里容易出问题的就是对数据合理性的判断，我们一些常见的判断就是非空判断、字符长度大小判断、字段格式判断、还有一些就是radio的转义操作，例如我们一般后端拿男女信息的时候要的不是男女，而是0和1，所以这个时候我们就可以写一个三元操作这个数据，下面写个例子：
let is_halt = rows.is_halt ? '1' : '0';is_halt绑定的就是0和1，那么对应的label其实就是男和女，具体非空判断、格式判断等等这些基本其实是和jQuery的写法是一样的，这里就不做赘述，vue是怎么操作这些数据的呢？我们需要给每一个字段用v-model绑定，然后在自己的data里面声明一下，这样就可以将数据拿到给后端了，看代码：
<li><span>创建用户:</span><input v-model="param.create_user"/>这是一条数据，对应的默认值就是：
/**
* @param no
* @flush 进行数据的清空操作
*/
flush(){
let that = this;
that.isEdite = false
that.param = {
create_user : '', // 创建者
}
},这里的处理是这样的，解释一下为什么写到这个flush函数里面，而不是写到data的return里面，我们都知道，我们新增数据的时候，想拿到一个字段的话，需要做的是v-model操作，然后this.create_user = 'Tom'就可以拿到这个数据了，那么其实这个时候return里面的该字段已经是Tom了，也就是我们已经改变就了默认值，那么我们再新增的时候，他的值就是Tom，显然这是不对的，也就是他其实就是起到一个清空该用户填写的数据的作用，这样可以保证的是每一次的新增都是默认值，而不是上一个用户自己写的数据，这是其一，那么有人就说了，这个还好说，为什么用param包裹起来呢？这个解释一下，我们的字段一般来说都是很多的，那么难道我们清空的时候一个字段一个字段的写吗？显然是很浪费时间的，虽然是可行的，但是不管从开发角度还是维护的角度来看都是不合理的写法，所以这里我们每一次新增的时候都直接调该函数就可以，因为该函数里面的是默认值，不会被改变，而且只需要写一行代码就搞定了清空数据的操作，那么还有人问了，为什么不直接写到return里面呢？这个我是试了，达不到清空数据的效果。而且会将字段也清空了，这样显然是错的！
删除
我们一般的删除就是直接拿到该行数据的ID，给后端，后端根据ID进行数据库的删除操作，那么删除唯一的难点就是怎么拿到每一行的ID数据，这里element提供了一个方法：
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="handleDeleteLd(scope.$index, scope.row,tableDataBuilding)">删除</el-button>
</template>这里的scope.row就是当前行的数据，其中就有id，我们可以直接写成scope.row.id就可以作为参数写到删除的方法里面，这样就可以直接删除了，那么这里会有一个问题，就是我们删除以后不是直接说数据就没有了，即使删除成功了，也需要用户刷新一次页面才是可以的，显然是不友好的，那么element也给我们提供了一个假删除的方法：
handleDeleteLd : function (index,row,TableData) {
let that = this;
let url = '您进行删除的接口';
that.$axios({
method : 'post',
url : url
}).then(function (res) {
console.info(res);
TableData.splice(index, 1);
that.$message({
message: that.hint,
type: 'success'
});
}).catch(function (err) {
console.info(err);
})
console.info(index,row.id);
},解释一下这里的写法，可以看到这个方法就是我上面写的方法，我传递了三个参数，分别是当前行数，当前行数据，和该表格绑定的data，我们进行删除操作以后，后端返回给我们成功以后，我们直接使用：
TableData.splice(index, 1);就可以将该行的数据清除掉，其实这个就是jQuery里面的基本的删除操作，他只是将当前表格的该行数据清除掉，但是并没有删除数据库的数据，但是由于我们接口已经将数据库的该条数据删除了，所以我们可以直接使用这样的方法，给用户提供一个更加友好的操作！
更新
之所以最后写更新，无非因为更新是里面最麻烦的一个，下面我们说一下怎么写更新相对来说简单的一些。
我们更新的流程还是很简单的，就是用户点击编辑的时候我们拿到的该行的数据，展示给用户看，用户觉得哪一条数据是不对的，直接改，然后提交更改的数据，我们将该条数据的id和用户最新输入的数据一起给后端，后端进行对应的数据库的update操作，这里麻烦的地方就在于我们第一步拿到所有的数据填到界面的控件里面去！
用到的还是之前删除的时候的操作，我们删除的时候有一个方法是scope.row，我说的是可以拿到的当前行的所有数据，那么这就比较好办了，我们直接将该行的数据重新赋值给控件就可以了，看代码：
<template slot-scope="scope">
<el-button
size="mini"
@click="dialogVisibleLd =true; EditeInfoLd(scope.row)">编辑</el-button>
</template>js:
EditeInfoLd : function(rows){
let that = this;
console.info(rows);
//这里将一个是否编辑的操作改为true 重置当前的isEdite
that.isEdite = true;
that.comEdite = rows,
that.param.create_user = rows.create_user,
},这样就将控件的默认值改掉了，这个时候用户点开的时候显示的就是当前行的数据，他进行修改的时候会再次修改v-model的值，那么就可以拿到最新的值了。
这里需要说一下，细心的人可能已经看出来了我有几行代码是没有做任何的解释的，第一行就是：
that.isEdite = true;第二行就是：
that.comEdite = rows,下面解释一下我为什么用到这两个看似一点意义没有的代码，其实是最有意义的代码
首先我们进行更新和新增的时候用的一帮情况下是一个dialog，dialog就是我们常说的弹出框，或者加一个属性的时候叫做遮罩层，那么我们常规的做法是新增的时候是一个dialog，更新的时候是一个dialog，那么这样是不是很烦呢？我们能不能直接通过一个字段来判断当前的用户使用的是新增还是更新呢？这就是isEdite字段的意义：
还记得我每次执行新增的时候都会走flush操作吗？只要执行该函数，我就认为他是一个新增的操作，那么我在flush函数里面直接：
that.isEdite = false这个时候的isEdite就是为false，为false的时候我们认为他不是更新，也就不是编辑，是新增，所以在执行保存之前我会先判断该走哪一个接口，是新增的接口还是更新的接口：
saveInfoLd : function () {
let that = this;
//如果isEdite为false就是进行新增操作
let urlData = that.isEdite ? '您的更新的接口'+that.comEdite.id+'/' : '您的新增的接口';
if(that.param.create_user){
that.$axios({
method : 'post',
url : urlData,
data : {
create_user : that.param.create_user,
}
}).then(function (res) {
that.dialogVisibleLd = false;
console.info(res);
}).catch(function (err) {
console.info(err);
})
}else{
that.$message({
message: '*为必填项！',
type: 'warning'
});
}
},因为我一个dialog里面只有一个保存按钮嘛，所以我们执行一个函数，在函数里面判断当前的is_Edite是true还是false，从而进行不同的接口执行。
那么还有一行就是comEdite是做什么的呢？我们更新的时候是需要id的，但是呢，我么只有在点击编辑按钮的时候才可以拿到这个id，也就是在拿到当前行数据的时候拿到的id，但是我们dialog点击保存的时候不知道是哪一个id，所以我们需要在return里面声明一个新的变量来保存这个id，也就是我么每次点击编辑的时候都将当前的id赋值给comEdite这个变量，那么我们进行更新时候的id一定是当前数据的id。
这样写最大的好处就是节省代码，代码越少出错的概率就越小。
还有一点就是我之前说的使用flush函数清空数据的操作，有的人说了，我点击新增的时候，只能将dialog为true或者调用flush的函数，怎么同时进行操作呢，既要打开dialog还要调这个函数，这个有两种解决办法，比较传统的办法是新写一个函数，该函数里面做两件事，第一件事是打开dialog，第二件事就是执行flush，第二种办法就是直接在改按钮的@click事件的后面进行写：
<button class="setbtn" @click="dialogVisibleLd = true; flush()">新增</button>这里需要注意的是，这种写法后面的函数必须加上小括号，不然不起作用！