表格当前行-对象数据传递给弹框 & 父组件传对象数据给子组件 & 接口写法-增删改查-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, 123654789);
      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,999999)
},

方法二：定时器来获取

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

mounted() {
    let _this=this;
    let {datas,status}=_this._props;
    setTimeout(()=>{
        console.log(this._props)
        console.log(this._props.datas,22222222)
    },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-数组格式或对象格式（推荐方法三、方法四）