后台系统都会遇到的表格,其中编辑功能需要点开后有当前行的数据,然后更改后再从新渲染到表格中,记录下如何实现吧。
效果
思路
表格编辑功能弹框思路:
弹框内有当前行表格的数据:
单独把弹窗写一个组件,并用vuex来互相连接数据
表格用slot-scope插槽,点击事件把scope.row(当前行信息)当参数。
点击事件把隐藏的弹框改为true让他显示出来。并且把row这个参数传给vuex里面的state内存起来,因为vuex会实时变化
然后再弹唱组件内用watch监听vuex中的state变化,如果改变就把值赋值给弹框组件内的变量。从而达到点击编辑时弹出操作框,里面自带当前行的属性
点击确定修改:
this.form 代表当前的弹框组件input写的内容。
1,发请求,把当前的form当参数传给后台,更新后台的数据。
2,隐藏弹出框,可以直接用上面的 this.$emit("hide");
3,在用emit调用父组件的list方法更新数据,在父组件上自定义事件接收 this.$emit("xxx");
因为已经发请求让后台数据被改了,那么重新渲染出来的就是新的数据。
代码
父组件(表格页面):
<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
item
}}</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin-top: 20px">
<el-row>
<el-col :span="8">
<el-input
placeholder="请输入内容"
class="input-with-select"
>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="8" :offset="8" style="text-align: right">
<el-button type="primary" @click="edit">新建角色</el-button>
<el-button :disabled="!this.selec.length" @click="open1">启动</el-button>
<el-button :disabled="!this.selec.length">冻结</el-button>
<el-button :disabled="!this.selec.length">删除</el-button>
</el-col>
</el-row>
</el-card>
<el-card style="margin-top: 17px">
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" ></el-table-column>
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="account" label="账户" width="180"></el-table-column>
<el-table-column prop="name" label="用户名" width="180"></el-table-column>
<el-table-column prop="character" label="角色"> </el-table-column>
<el-table-column prop="remark" label="备注"> </el-table-column>
<el-table-column prop="reason" label="创建原因"> </el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">{{scope.row.status==1?"启用":"禁用"}}</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="edit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
<el-button size="mini">
{{scope.row.status==1?"禁用":"启用"}}
</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<account-modal :visible="visible" @hide="hide"></account-modal>
</div>
</template>
<script>
import {mapMutations} from "vuex"
import breadcrumb from "@/mixins/breadcrumb.js";
import {get} from "@/utils/http.js";
import accountModal from "./accountModal"
export default {
data(){
return{
tableData:[],
selec:[],
succ:[],
visible:false
}
},
//混入模块,面包屑导航引入
mixins: [breadcrumb],
//声明周期
created(){
this.list()
},
components:{
accountModal
},
methods:{
...mapMutations(["saveData"]),
list(){
//更新渲染表格数据
get("/all").then((res)=>{
this.tableData=res.data.list
})
},
handleSelectionChange(selection){
//参数=返回当前行的数据
this.selec=selection
//用map循环把当前项的account属性拿出来给succ用于后面使用
this.succ=this.selec.map(item=>item.account)
},
open1(){
//点击启动的时候弹出请求成功信息
this.$notify({
title: '请求成功',
message: `${this.succ}请求成功`,
type: 'success'
});
},
edit(row){
//更改为true模式,显示提示框
this.visible=true;
//点击编辑时把当前行的数据当参数传给veux内的rowData
this.saveData(row)
},
hide(){
//更改为false模式,隐藏提示框
this.visible=false;
}
}
};
</script>
<style lang="less" scoped>
</style>
弹框组件:
<template>
<div>
<el-dialog
title="提示"
:visible.sync="visible"
width="30%"
:before-close="cancel"
>
<el-form :model="form" :rules="rules" ref="forms">
<el-form-item label="角色" label-width="100px" prop="character">
<el-select
v-model="form.character"
placeholder="请选择角色"
style="width: 100%"
>
<el-option label="业务人员" value="1"></el-option>
<el-option label="审核人员" value="2"></el-option>
<el-option label="风控经理" value="3"></el-option>
<el-option label="管理员" value="4"></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" label-width="100px" prop="remark">
<el-input v-model="form.remark" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="创建原因" label-width="100px" prop="reason">
<el-input
type="textarea"
v-model="form.reason"
autocomplete="off"
></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
props: {
//接收父组件传过来的值。
visible: {
type: Boolean,
required: true,
default: false,
},
},
computed: {
...mapState(["rowData"]),
},
watch: {
//监听vuex内rowData如果变了就赋值给form,从而从新渲染更新页面。
rowData() {
this.form = {
character: this.rowData.character,
remark: this.rowData.remark,
reason: this.rowData.reason,
};
},
},
data() {
return {
//弹出框内容双向绑定
form: {
character: "",
remark: "",
reason: "",
},
//规则:弹出框内容必填项等规则
rules: {
character: [
{ required: true, message: "请选择角色", trigger: "change" },
],
remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
reason: [
{ required: true, message: "请输入创建原因", trigger: "blur" },
],
},
};
},
methods: {
//子传父,调用父组件方法改动显示隐藏从而动态控制子组件显示隐藏
cancel() {
this.$emit("hide");
},
},
};
</script>
<style lang="less" scoped>
</style>