表格当前行-对象数据传递给弹框 & 父组件传对象数据给子组件 & 接口写法-增删改查-post-get-delete

表格当前行-对象数据传递给弹框 & 父组件传对象数据给子组件 & 接口写法-增删改查-post-get-delete

1、父组件-主页表格

结构

<el-table> <el-table-column label="操作"> <template slot-scope="scope"> <!-- @click="handleEdit(scope.$index, scope.row)" --> <!-- 编辑按钮 --> <i class="el-icon-edit-outline" type="success" style="font-size: 30px; color: #67c23a" @click="editFile(scope.$index, scope.row)" ></i> <!-- 删除按钮 --> <i class="el-icon-delete" type="danger" style="font-size: 30px; color: #f56c6c" @click="handleDelete(scope.$index, scope.row)" ></i> </template> </el-table-column> </el-table> <!-- 弹框模块 子组件 --> <EditBuild ref="dialog1" :tableValue="this.tableValue" /> 

数据

import EditBuild from "../../components/entityType/editBuild.vue"; data(){ 
    return{ 
    tableValue: { 
   }, } } 

方法

methods:{ 
    //编辑 editFile(index, row) { 
    console.log(index, row); this.tableValue = row; console.log(this.tableValue, "7777"); this.$refs.dialog1.dialogVisibleA = !this.$refs.dialog1.dialogVisibleA; }, //删除 handleDelete(index, row) { 
    // console.log(index, row); // console.log(row.serialNumber); this.deleteTable(row.serialNumber); }, // 删除列表数据 deleteTable(id) { 
    deletes(id).then((res) => { 
    this.getAllTable(); }); }, } 

父组件-接口DELETE

/* 删除数据（可批量） */ export function deletes(id) { 
    return axios({ 
    url: `/entity/deleteById?idList=${ 
     id}`, method: 'DELETE', }) } /* 获取列表数据 */ export function getListAll(params) { 
    return axios({ 
    url: '/entity/getAll', method: 'GET', params }) } /* 新建数据 */ export function add(data) { 
    return axios({ 
    url: '/entity/add', method: 'POST', data }) } /* 修改数据（可批量） */ export function update(data) { 
    return axios({ 
    url: '/entity/update', method: 'POST', data }) } /* 搜索数据 */ export function query(data) { 
    return axios({ 
    url: `/entity/getPage?name=${ 
     data}`, method: 'GET', }) } 

2、子组件-弹框

接收

export default { 
    name: "newlyBuild", // 父传子数据特点 只读 props: { 
    tableValue: { 
    type: Object, }, }, watch: { 
    tableValue(newData, prevData) { 
    // console.log(newData, ); this.ruleForm.entityName = newData.entityName; this.ruleForm.entityDictionaries = newData.entityDictionaries; this.ruleForm.serialNumber = newData.serialNumber; // console.log(this.ruleForm.entityName, 123); }, }, } 

使用

methods:{ 
    //提交-新建按钮 addEntity() { 
    // console.log(this.tableValue); // console.log(this.ruleForm.entityDictionaries, "55555"); // 新建列表数据 let params = { 
    entityDictionaries: this.ruleForm.entityDictionaries, entityName: this.ruleForm.entityName, serialNumber: this.ruleForm.serialNumber, }; update(params).then((res) => { 
    this.dialogVisibleB = false; this.getAllTable(); window.parent.location.reload(); }); }, } 

接口-POST

/* 修改数据（可批量） */ export function update(data) { 
    return axios({ 
    url: '/entity/update', method: 'POST', data }) } 

数据

data() { 
    return { 
    dialogVisibleA: false, ruleForm: { 
    entityName: "", entityDictionaries: "", }, } } 

页面使用

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="名称" prop="entityName"> <el-input v-model="ruleForm.entityName" style="width: 85%" placeholder="请输入实体类型名称" ></el-input> </el-form-item> </el-form> 

3、附-vue通过props方式在子组件中获取相应的对象

子组件定义props，父组件传入数据，子组件在js中获取的时候使用，如果是在html里面，可以直接把变量渲染上去。

子组件-js代码

//子组件中，定义传入的变量的类型等  props: { 
    data: { 
    type: Array, require: true }, status: { 
    type: Boolean, require: false } } 

直接在生命周期函数里面打印props

mounted(){ 
    let _this=this; console.log(_this._props,66666); } 

方法一：直接拿取

所以就可以直接拿取-有时候会获取不到datas

mounted() { 
    let _this=this; let { 
   datas,status}=_this._props; console.log(this._props) console.log(this._props.datas,) }, 

方法二：定时器来获取

有时候会获取不到datas，this._props可以拿到值，这时候可以用一个定时器来获取

mounted() { 
    let _this=this; let { 
   datas,status}=_this._props; setTimeout(()=>{ 
    console.log(this._props) console.log(this._props.datas,) },1000) } 

方法三：深拷贝

深拷贝

mounted() { 
    let _this=this; let props = { 
   ..._this._props}; console.log(props,"props.......") }, 

方法四：利用watch监听

利用watch监听

//直接监听data，因为这里的props的变量名为data  watch:{ 
    data(newData,prevData){ 
    console.log(newData,"新数据") } } 

四种方法的使用，获取到想要的data-数组格式或对象格式（推荐方法三、方法四）

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/10883.html