时间戳

首页 > 解决方案 > 如何将数据从 vue 中的表格组件传递到另一个表格组件，使用编辑按钮传递表格中的每一行

javascript - 如何将数据从 vue 中的表格组件传递到另一个表格组件，使用编辑按钮传递表格中的每一行

问题描述

我有两个表组件，一个使用 axios 获取记录，我希望另一个表组件在单击父组件上的编辑按钮后获取记录。我已经尝试过使用 vue 提供的父子组件通信，但它不适用于表格。第一个表组件

<div><table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>Request NO</th>
                        <th>User name</th>
                        <th>Product</th>
                        <th>Requested Quantity</th>
                        <th>Approved Quantity</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                    </thead> <tbody>
                    <tr v-for="temp in reques " >
                        <td>{{temp.operation_id}}{{temp.user_id}}</td>
                        <td>{{temp.user_id}}</td>
                        <td>{{temp.product_name}}</td>
                        <td>{{temp.rquantity}}</td>
                        <td>{{temp.aquantity}}</td>
                        <td>{{temp.status}}</td>
                        <td>{{temp.created_at}}</td>
                        <td>
                            <div role="group" class="btn-group">
                                <button class="btn btn-info" @click="edit(temp)"
                                        type="button">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button class="btn btn-danger" type="button">
                                    <i class="fa fa-trash"></i>
                                </button>

                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>div class="col">
    <approved :form="form"></approved>
</div></div>

import VForm from 'vform'
import AlertError from "vform/src/components/AlertError";
import HasError from "vform/src/components/HasError";
import approved from "./approved";
import operationcreate from "./create" export default {
    components: {HasError, AlertError,
        approved,operationcreate,
    },
    data() {
        return {
            reques: [],
            here: [],
            form: new VForm({
                operation_id:'',
                product_name:'',
                rquantity: '',
                aquantity:'',
                status:'',
                created_at:'',
                user_id:''
            })
        }
    },
    methods:{
        edit(temp){
            this.form.fill(temp);
        }
    },
    created() {
        axios.get('/request-list')
            .then(({data}) => this.reques = data);
    }
}

第二个表格组件

 <div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Quick Access</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th> Product Name</th>
                    <th> Request Quantity </th>
                    <th> Approved Quantity</th>
                    <th> Status</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="temp in form">
                    <td>1</td>
                    <td>{{temp.rquantity}}</td>
                    <td>{{temp.aquantity}}</td>
                    <td>{{temp.status}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<script>
export default {
    props: ['form'],
    data() {
        return {

        }
    },
    methods: {},
    created() {

    }
}

标签： javascriptlaravelvue.js

解决方案

当您在表 1 中的 axios 请求后获取数据时，您必须发出一个事件，以便父级可以访问它。

所以在表 1 中：

created() {
        axios.get('/request-list')
            .then(({data}) => {
                this.reques = data
                this.$emit("dataRecieved",data)
             });
    }

这将在组件中触发一个事件，该事件可由父级的v-on（或 @）访问：

<table-component-1 @dataRecieved="updateTableTwo" ></table-component-1>

您需要在父对象中创建一个空对象并作为道具传递给表 2，直到收到 axios 请求值：

<table-component-2 :myData="tableData" ></table-component-1>

父级中的updateTableTwo()方法（默认传递事件参数）：

updateTableTwo(event) {
   this.tableData = event
   //event will contain the passed data from table 1
}

推荐阅读