vue实现element自定义新增、删除table表格的行,和可输入input(可以自行修改成双击表格可编辑)
vue实现element自定义新增、删除table表格的行,和可输入input(可以自行修改成双击表格可编辑
·
效果如图:新增表格行,可点编辑再修改表格行内容(也可以自行修改成双击表格可编辑)
思路:
1.新增表格行(handleAddBtn):给表格数组(我这里是用tableData数组)push空的对象
2.删除行(handleDeleteBtn):
①首先要拿到对应的索引,即可以用表格的@selection-change="handleDetailSelectionChange"获取勾选的行;
②然后在删除的方法里判断用户勾选选择行的长度(我这里是用checkedDetail数组存储),长度若为0则表示没有选择,为了增加用户体验感给予提示即可;若长度大于0,遍历checkedDetail与tableData作比较(xh属性)相同的删除即可
3.可编辑行(showUpdate):拿到对应的索引并令其显示(this.showEdit[index] = true;网上说要用 $ set方法,否则页面状态不更新)
4.取消编辑(cancelUpdate):拿到对应的索引并令其隐藏(this.showEdit[index] = false;)
1、点击新增table表格行
添加点击事件,在handleAddBtn方法中创建表格对象(由于我表格数据太多,就删除了大部分,照样子模仿就行)
<el-button type="success" icon="el-icon-plus" size="mini" @click="handleAddBtn">添加</el-button>
//点击新增更多
handleAddBtn() {
this.getaddress = ""; //临时存储用户地址
et obj = {}; //创建空的对象
obj.username = ""; //用户名称
obj.mescode = ""; //账号
obj.address = ""; //地址
this.tableData.push(obj); //在tableData表格数组中添加对象
}
2、点击删除行,可多选
添加删除点击事件,handleDeleteBtn方法把对应多选选中的行删除
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBtn">删除</el-button>
//删除
handleDeleteBtn() {
if (this.checkedDetail.length == 0) {
this.$alert("请先选择要删除的数据", "提示", {
confirmButtonText: "确定",
});
} else {
this.$confirm("请是否确认删除该属性?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
callback: (action) => {
if (action === "confirm") {
let val = this.checkedDetail; //checkedDetail为表格多选选中的数组
val.forEach((val, index) => {
this.tableData.forEach((v, i) => {
if (val.xh === v.xh) {
this.tableData.splice(i, 1);
}
});
});
this.$message({
message: "删除成功,记得保存修改喔!",
type: "success",
});
this.$refs.tb.clearSelection();
return;
} else {
this.$message({
message: "已取消删除操作",
type: "warning",
});
return;
}
},
});
}
}
3.操作部分的编辑、确定、取消功能
这里的行需要拿到对应的index值,所以需要用slot-scope=“{row,$index}”;
showEdit是个空数组,用来控制对应的标签显示及隐藏的;
这里使用this. $set() 方法将对应索引的行改成true或false
<el-table-column header-align="center" align="center" width="100" label="操作">
<template slot-scope="{row,$index}">
<el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)" type="text" size="small">编辑</el-button>
<el-button v-if="showEdit[$index]" @click="submit($index,row)" type="text" size="small" style="color: #85ce61;">确定</el-button>
<el-button v-if="showEdit[$index]" @click="cancelUpdate($index)" type="text" size="small" style="color: red;">取消</el-button>
</template>
</el-table-column>
//点击修改
showUpdate(index, row) {
console.log("index");
this.showEdit[index] = true;
this.$set(this.showEdit, index, true); //这里要用$set方法,否则页面状态不更新
},
//提交修改
submit(index, row) {
console.log("index", index);
this.tableData[index].address = this.getaddress.adrNAME;
// this.tableData[index].username = this.getUser.label;
console.log("tableData===submit", this.tableData);
//发送请求,隐藏输入框
this.$message({
type: "success",
message: "已缓存,记得点击保存提交修改喔!",
duration: 888,
onClose: () => {
this.$set(this.showEdit, index, false); //vue添加属性的方法
},
});
},
//取消修改
cancelUpdate(index) {
this.$confirm("取消修改?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$set(this.showEdit, index, false);
})
.catch(() => {});
}
完整代码:
<!-- 可新增/删除table表格页面 -->
<template>
<div>
<el-button type="success" icon="el-icon-plus" size="mini" @click="handleAddBtn">添加</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteBtn">删除</el-button>
<el-table ref="tb" :data="tableData" :header-cell-style="{background:'rgb(113 167 228)',color:'#fff'}" :row-class-name="rowClassName" border style="width: 100%; cursor: pointer;" @selection-change="handleDetailSelectionChange">
<el-table-column type="selection" align="center" width="50" />
<el-table-column label="序号" align="center" prop="xh" width="50" />
<el-table-column prop="mescode" align="center" :required="true" label="账号">
<template slot-scope="{row,$index}">
<span v-if="!showEdit[$index]">{{ row.mescode }}</span>
<el-input v-if="showEdit[$index]" v-model="tableData[row.xh-1].mescode" placeholder="请输入该用户的账号">
<i slot="prefix" class="el-input__icon el-icon-search" />
</el-input>
</template>
</el-table-column>
<el-table-column prop="password" align="center" :required="true" label="密码">
<template slot-scope="{row,$index}">
<span v-if="!showEdit[$index]">{{ row.password }}</span>
<el-input v-if="showEdit[$index]" v-model="tableData[row.xh-1].password" placeholder="请输入该用户的密码">
<i slot="prefix" class="el-input__icon el-icon-search" />
</el-input>
</template>
</el-table-column>
<el-table-column header-align="center" align="center" width="100" label="操作">
<template slot-scope="{row,$index}">
<el-button v-if="!showEdit[$index]" type="text" size="small" @click="showUpdate($index,row)">编辑</el-button>
<el-button v-if="showEdit[$index]" type="text" size="small" style="color: #85ce61;" @click="submit($index,row)">确定</el-button>
<el-button v-if="showEdit[$index]" type="text" size="small" style="color: red;" @click="cancelUpdate($index)">取消</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
tableData: [],
checkedDetail: [],
showEdit: [] // 控制显示及隐藏
}
},
methods: {
// 表格的新增
rowClassName({ row, rowIndex }) {
row.xh = rowIndex + 1
},
// 单选框选中数据
handleDetailSelectionChange(selection) {
this.checkedDetail = selection
},
// 点击新增更多
handleAddBtn() {
const obj = {}
obj.mescode = ''
obj.password = ''
this.tableData.push(obj)
},
// 删除
handleDeleteBtn() {
if (this.checkedDetail.length === 0) {
this.$alert('请先选择要删除的数据', '提示', {
confirmButtonText: '确定'
})
} else {
this.$confirm('请是否确认删除该属性?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
callback: (action) => {
if (action === 'confirm') {
const val = this.checkedDetail
val.forEach((val, index) => {
this.tableData.forEach((v, i) => {
if (val.xh === v.xh) {
this.tableData.splice(i, 1)
}
})
})
this.$message({
message: '删除成功,记得保存修改喔!',
type: 'success'
})
this.$refs.tb.clearSelection()
return
} else {
this.$message({
message: '已取消删除操作',
type: 'warning'
})
return
}
}
})
}
},
// 点击修改
showUpdate(index, row) {
console.log('index')
this.showEdit[index] = true
this.$set(this.showEdit, index, true) // 这里要用$set方法,否则页面状态不更新
},
// 取消修改
cancelUpdate(index) {
this.$confirm('取消修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$set(this.showEdit, index, false)
})
.catch(() => {})
},
// 提交修改
submit(index, row) {
// 发送请求,隐藏输入框
this.$message({
type: 'success',
message: '已缓存,记得点击保存提交修改喔!',
duration: 888,
onClose: () => {
this.$set(this.showEdit, index, false) // vue添加属性的方法
}
})
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)