实现表单四级嵌套 点击展开发送请求实时获取下一级数据

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量135 收藏
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73267676/article/details/132576632
版权

效果图

三级嵌套：

四级嵌套：

页面需求是根据工单类型不同 分为三级嵌套和四级嵌套，且点击展开实时发送请求获取数据，最后一级统一为标签页且点击标签页发送请求。

<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="工单编号">
                            <el-input v-model="queryObj.mo_code" placeholder="请输入工单编号" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="生产任务单编号">
                            <el-input v-model="queryObj.mo_task_code" placeholder="请输入生产任务单编号" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="标签扫码">
                            <el-input v-model="queryObj.barcode" placeholder="请标签扫码" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">
                                {{ $t('common.search') }}</el-button>
                            <el-button icon="el-icon-refresh-right" @click="init()">{{ $t('common.reset') }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <!-- 下 -->
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <!-- 1 -->
                <el-table :data="oneList" style="overflow: auto;" v-loading="packTaskLoading" @expand-change="expandChange">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <div class="div1">
                                <!-- 2 -->
                                <el-table :data="props.row.ruleItemData" style="width: 100%"
                                    @expand-change="expandChangeThree">
                                    <el-table-column type="expand">
                                        <!-- 3 -->
                                        <template slot-scope="props">
                                            <div v-if="props.row.type == 2">
                                                <el-table :data="props.row.ruleItemData" style="width: 100%"
                                                    @expand-change="expandChangefour">
                                                    <el-table-column type="expand">
                                                        <template slot-scope="props">
                                                            <el-tabs v-model="props.row.activeName">
                                                                <el-tab-pane name="ren">
                                                                    <div slot="label"
                                                                        @click="handleClick('ren', props.row)">员工详情
                                                                    </div>
                                                                    <el-table :data="props.row.ruleItemData"
                                                                        style="width: 100%">
                                                                        <el-table-column type="index" label="序号"
                                                                            :index="1" />
                                                                        <el-table-column prop="employee_name"
                                                                            label="员工名称" />
                                                                        <el-table-column prop="start_time" label="开始时间" />
                                                                    </el-table>
                                                                </el-tab-pane>
                                                                <el-tab-pane name="ji">
                                                                    <div slot="label" @click="handleClick('ji', props.row)">
                                                                        设备详情
                                                                    </div>
                                                                    <el-table :data="props.row.ruleItemData"
                                                                        style="width: 100%">
                                                                        <el-table-column type="index" label="序号"
                                                                            :index="1" />
                                                                        <el-table-column prop="equip_code" label="设备编码" />
                                                                        <el-table-column prop="mold_code" label="模具编码" />
                                                                    </el-table>
                                                                </el-tab-pane>
                                                                <el-tab-pane name="liao">
                                                                    <div slot="label"
                                                                        @click="handleClick('liao', props.row)">物料详情
                                                                    </div>
                                                                    <el-table :data="props.row.ruleItemData"
                                                                        style="width: 100%">
                                                                        <el-table-column type="index" label="序号"
                                                                            :index="1" />
                                                                        <el-table-column prop="material_code"
                                                                            label="投入物料编号" />
                                                                        <el-table-column prop="material_name" label="名称" />
                                                                        <el-table-column prop="batch" label="批次号" />
                                                                        <el-table-column prop="supplier_name" label="供应商" />
                                                                        <el-table-column prop="check_conclusion"
                                                                            label="检验结论" />
                                                                        <el-table-column prop="instock_time" label="入库时间" />
                                                                        <el-table-column prop="feeding_time" label="投料时间" />
                                                                    </el-table>
                                                                </el-tab-pane>
                                                            </el-tabs>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="序号" type="index" />
                                                    <el-table-column label="子任务单号" prop="mo_task_code" />
                                                    <el-table-column label="工位" prop="station_name" />
                                                    <el-table-column label="工序" prop="process_name" />
                                                    <el-table-column label="产出物料" prop="material_name" />
                                                    <el-table-column label="批次号" prop="batch" />
                                                </el-table>
                                            </div>
                                            <el-tabs v-model="props.row.activeName" v-if="props.row.type == 1">
                                                <el-tab-pane name="ren">
                                                    <div slot="label" @click="handleClick('ren', props.row)">员工详情</div>
                                                    <el-table :data="props.row.ruleItemData" style="width: 100%">
                                                        <el-table-column type="index" label="序号" :index="1" />
                                                        <el-table-column prop="employee_name" label="员工名称" />
                                                        <el-table-column prop="start_time" label="开始时间" />
                                                    </el-table>
                                                </el-tab-pane>
                                                <el-tab-pane name="ji">
                                                    <div slot="label" @click="handleClick('ji', props.row)">设备详情</div>
                                                    <el-table :data="props.row.ruleItemData" style="width: 100%">
                                                        <el-table-column type="index" label="序号" :index="1" />
                                                        <el-table-column prop="equip_code" label="设备编码" />
                                                        <el-table-column prop="mold_code" label="模具编码" />
                                                    </el-table>
                                                </el-tab-pane>
                                                <el-tab-pane name="liao">
                                                    <div slot="label" @click="handleClick('liao', props.row)">物料详情</div>
                                                    <el-table :data="props.row.ruleItemData" style="width: 100%">
                                                        <el-table-column type="index" label="序号" :index="1" />
                                                        <el-table-column prop="material_code" label="投入物料编号" />
                                                        <el-table-column prop="material_name" label="名称" />
                                                        <el-table-column prop="batch" label="批次号" />
                                                        <el-table-column prop="supplier_name" label="供应商" />
                                                        <el-table-column prop="check_conclusion" label="检验结论" />
                                                        <el-table-column prop="instock_time" label="入库时间" />
                                                        <el-table-column prop="feeding_time" label="投料时间" />
                                                    </el-table>
                                                </el-tab-pane>
                                            </el-tabs>
                                        </template>
                                        <!-- <template slot-scope="props" v-if="props.row.type == 2"> -->
                                        <!-- <div class="div5"> -->
                                        <!-- <el-table :data="props.row.ruleItemData" style="width: 100%">

                                                </el-table> -->
                                        <!-- </div> -->
                                        <!-- </template> -->
                                    </el-table-column>
                                    <el-table-column type="index" label="序号" :index="1" />
                                    <el-table-column label="生产任务单" prop="mo_task_code" />
                                    <el-table-column label="物料编码" prop="material_code" />
                                    <el-table-column label="物料名称" prop="material_name" />
                                    <el-table-column label="规格型号" prop="material_standard" />
                                    <el-table-column label="开始时间" prop="act_start_date" />
                                    <el-table-column label="结束时间" prop="act_end_date" />
                                    <el-table-column label="生产线 或 车间/工位">
                                        <template slot-scope="props">
                                            <div>{{ props.row.type == 1 ? props.row.workshop_name + '/' +
                                                props.row.station_name : props.row.workline_name }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="生产BOM版本 或 设备编号">
                                        <template slot-scope="props">
                                            <div>{{ props.row.type == 1 ? props.row.equip_code : props.row.mbom_version }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" :index="1" />
                    <el-table-column label="生产工单" prop="mo_code" />
                    <el-table-column label="物料编码" prop="material_code" />
                    <el-table-column label="物料名称" prop="material_name" />
                    <el-table-column label="规格型号" prop="material_standard" />
                    <el-table-column label="开始时间" prop="act_start_date" />
                    <el-table-column label="结束时间" prop="act_end_date" />
                </el-table>
                <pagination :total="total" :page.sync="queryObj.currentPage" :limit.sync="queryObj.pageSize"
                    @pagination="search" />
            </div>
        </div>
    </div>
</template>
<script>
import { getOneList, getTwoList, getThreeList, getListByMan, getListByEqu, getListByMat } from "@/api/retrospect/codeRetrospect";
export default {
    data() {
        return {
            oneList: [],
            packTaskLoading: false,
            total: 0,
            queryObj: {
                currentPage: 1,
                pageSize: 20,
                mo_code: "",
                mo_task_code: "",
                barcode: ""
            },
        }
    },
    activated() {
    },
    watch: {
    },
    created() {
        this.search()
    },
    mounted() {
    },
    methods: {
        async init() {
            this.queryObj = {
                currentPage: 1,
                pageSize: 20,
                mo_code: "",
                mo_task_code: "",
                barcode: ""
            }
            this.search()
        },
        async search() {
            this.packTaskLoading = true
            const { data } = await getOneList(this.queryObj)
            this.total = data.pagination.total
            data.list.map(item => {
                item.ruleItemData = [];
            });
            this.oneList = data.list
            this.packTaskLoading = false
        },
        // 第一级点击
        async expandChange(row, expandedRows) {
            if (expandedRows.length == 0) return
            const obj = {
                mo_id: row.id,
                mo_task_code: this.queryObj.mo_task_code,
                barcode: this.queryObj.barcode,
            }
            const { data } = await getTwoList(obj)
            this.oneList.forEach((item, index) => {
                // 找到当前点击的行，把动态获取到的数据赋值进去
                if (item.id === row.id) {
                    // this.$nextTick(()=>{
                    data.forEach((it, index) => {
                        it.type = row.type
                        it.parentId = item.id
                        it.ruleItemData = []
                    })
                    this.oneList[index].ruleItemData = data
                    // this.$set(this.oneList[index], 'ruleItemData', data)
                    // })
                }
            });
        },
        // 第二级点击
        async expandChangeThree(row, expandedRows) {
            if (expandedRows.length == 0) return

            this.oneList.forEach((item, index) => {
                if (item.id !== row.parentId) return
                this.oneList[index].ruleItemData.forEach((it, ind) => {
                    // 找到当前点击的行，把动态获取到的数据赋值进去
                    if (it.id !== row.id) return
                    if (row.type == 1) {
                        this.oneList[index].ruleItemData[ind].activeName = 'ren'
                        const obj = {
                            mo_task_id: row.id,
                            barcode: this.queryObj.barcode,
                        }
                        getListByMan(obj).then(({ data }) => {
                            this.oneList[index].ruleItemData[ind].ruleItemData = data
                        })
                        return
                    }
                    const obj = {
                        mo_task_id: row.id,
                        mo_task_code: this.queryObj.mo_task_code,
                        barcode: this.queryObj.barcode,
                    }
                    getThreeList(obj).then(({ data }) => {
                        data.forEach((elitem, elindex) => {
                            elitem.type = row.type
                            elitem.granddadId = it.parentId
                            elitem.parentId = it.id
                            elitem.ruleItemData = []
                        })
                        this.oneList[index].ruleItemData[ind].ruleItemData = data
                    })
                })
            });
        },
        // 第三级点击
        async expandChangefour(row, expandedRows) {
            if (expandedRows.length == 0) return
            this.oneList.forEach((item, index) => {
                if (item.id !== row.granddadId) return
                this.oneList[index].ruleItemData.forEach((it, ind) => {
                    // 找到当前点击的行，把动态获取到的数据赋值进去
                    if (it.id !== row.parentId) return
                    this.oneList[index].ruleItemData[ind].ruleItemData.forEach((elitem, indx) => {
                        if (elitem.id !== row.id) return
                        const obj = {
                            mo_task_id: row.id,
                            barcode: this.queryObj.barcode,
                        }
                        this.oneList[index].ruleItemData[ind].ruleItemData[indx].activeName = 'ren'
                        getListByMan(obj).then(({ data }) => {
                            this.oneList[index].ruleItemData[ind].ruleItemData[indx].ruleItemData = data
                        })
                    })
                })
            });
        },
        handleClick(fig, row) {
            if (row.type == 1) {
                this.oneList.forEach((item, index) => {
                    if (item.id !== row.parentId) return
                    this.oneList[index].ruleItemData.forEach((it, ind) => {
                        // 找到当前点击的行，把动态获取到的数据赋值进去
                        if (it.id !== row.id) return
                        const obj = {
                            mo_task_id: row.id,
                            barcode: this.queryObj.barcode,
                        }
                        // fig == 'ren' ? getListByMan(obj) : fig == 'ji' ? getListByEqu(obj) : getListByMat(obj).then(({ data }) => {
                        //     this.$set(this.oneList[index].ruleItemData[ind], 'ruleItemData', data)
                        //     this.$forceUpdate()
                        // })
                        if (fig == 'ren') {
                            getListByMan(obj).then(({ data }) => {
                                this.$set(this.oneList[index].ruleItemData[ind], 'ruleItemData', data)
                            })
                        }
                        if (fig == 'ji') {
                            getListByEqu(obj).then(({ data }) => {
                                this.$set(this.oneList[index].ruleItemData[ind], 'ruleItemData', data)
                            })
                        } else {
                            getListByMat(obj).then(({ data }) => {
                                this.$set(this.oneList[index].ruleItemData[ind], 'ruleItemData', data)
                            })
                        }
                    })
                });
            } else {
                this.oneList.forEach((item, index) => {
                    if (item.id !== row.granddadId) return
                    this.oneList[index].ruleItemData.forEach((it, ind) => {
                        if (it.id !== row.parentId) return
                        this.oneList[index].ruleItemData[ind].ruleItemData.forEach((elitem, indx) => {
                            // 找到当前点击的行，把动态获取到的数据赋值进去
                            if (elitem.id !== row.id) return
                            const obj = {
                                mo_task_id: row.id,
                                barcode: this.queryObj.barcode,
                            }
                            if (fig == 'ren') {
                                getListByMan(obj).then(({ data }) => {
                                    this.$set(this.oneList[index].ruleItemData[ind].ruleItemData[indx], 'ruleItemData', data)
                                })
                            }
                            if (fig == 'ji') {
                                getListByEqu(obj).then(({ data }) => {
                                    this.$set(this.oneList[index].ruleItemData[ind].ruleItemData[indx], 'ruleItemData', data)
                                })
                            } else {
                                getListByMat(obj).then(({ data }) => {
                                    this.$set(this.oneList[index].ruleItemData[ind].ruleItemData[indx], 'ruleItemData', data)
                                })
                            }
                        })
                    })
                });
            }


        }
    }


}
</script>
<style scoped lang="scss">
// .div1 {
//     /* width: 300px; */
//     /* height: 200px; */
//     position: relative;
//     color: #fff;
//     border: 2px solid rgb(209, 204, 183);
//     border-radius: 10px;
//     background: #ffd700;
//     transition: all .3s;
// }
</style>

思路是第一层el-table为总数据 为oneList，第二层运用el-table-column type="expand" 插入props插槽 通过expand-change（点击展开方法）在此方法里发送请求与后台交互获取第二层数据 通过expand-change方法返回的row（该点击的子项数据）里的id 循环找到oneList对应的子项插进去

这是实现嵌套两层的基本思路 后面的三层 四层都是根据此思路来的 

但是有个bug 点击第一次的时候视图不更新 第二次才更新 用了this.$set也没用 所以得在获取oneList的时候就得跟它添加个子项这样bug解除

第三第四的嵌套看代码吧 稍微相比复杂一点 因为到了第三层 没有id来识别此数据是oneList的第一层子级 所以我选择的办法是加了个parentId 识别的时候用了三层循环  第四层也是一样 额外加了granddadId 识别用四层循环。

三乌e
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd table嵌套子表格 后端动态获取数据 rudex写法示例
cherry__yu的博客
12-01 2580
有一个需求是可以使主表格里每一栏数据展开，在子table里显示与其相关的子数据项，展开的时候去向后台请求数据显示。 用的组件库是Antd。 首先我们看Antd官方文档的Table有嵌套子表格的功能， 可见我们需要使用expandedRowRender参数，但是尝试在expandedRowRender函数中进行请求，会发现发出了连续的请求，所以我们把请求写在onExpand中，只在点击展开图表的时候发出一次。 之后我们写onExpand函数，注意这里的参数要写上expanded，代表是展开还是合并，我之前
ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1
08-19
13.5.2　获取关联数据 13.5.3　编辑数据 13.5.4　验证 13.6　使用QueryExtender控件 13.6.1　使用SearchExperssion 13.6.2　使用RangeExpression 13.6.3　使用PropertyExpression 13.6.4　使用Method...
【vue组件】使用element-ui table 实现嵌套表格 点击展开时获取数据
loyd3的博客
09-14 3708
然后，因为选中子table的单选框后，把展开的子table收齐再展开时，单选框的选中样式会丢失，这时我想的办法是根据之前选中的选项，调用toggleRowSelection这个方法，再把单选框选中。在上面代码中hasSelections 是判断是否有选中的选项，然后把展开子表格选中的id取出来，根据选中的id调用toggleRowSelection去点击。但这里会产生一个问题，用$set赋值后，页面会重新渲染，展开的table会收回去，我的想法是让展开的table保持展开的状态，
Antd的嵌套表格-点击当前行异步获取子表格数据
huanhuan03的博客
03-02 2065
Antd嵌套表格
vue3 组合式 ant.design组件Table嵌套表格，从后端获取数据并动态渲染
defined_的博客
05-09 2918
在根据官方文档使用ant.design中的嵌套表格时，发现官方文档很多地方都不够详细。 在过程中踩了不少坑，例如：子表如何获取父表的数据？如何获取子表的行索引？如何让子表的数据源来自父表该行的数据？总之，最后还是磕磕绊绊做完了功能，于是第一时间把代码整理出来以作分享。
Antd(Ant-design)，嵌套子表格（expandedRowRender）的异步获取数据
weixin_38289699的博客
06-29 2673
使用阿里的ant-design开源框架，要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后，获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。 如果这样写（省略无关代码）： expandedRowRender = (record) => { dispatch({ type: 'flow/getPlanList', payload: { contractId: record.contract_id, // 该参数...
计算机等级考试四级--软件工程
青衣煮茶
02-15 5734
全国计算机等级考试四级教程 ——软件工程（2013版） （殷绍波） 2015年9月26日录入 目  录 第1章 软件工程概述 - 8 - 1.1 软件和软件工程的概念 - 8 - 1.1.1 软件的概念 - 8 - 1.1.2 软件危机 - 9 - 1.1.3 软件工程的概念 - 9 - 1.2 软件工程方法 - 9 - 1.2.1 面向过程方法 - 9 - 1.2.2 面...
SpringWebFlux-3(请求数据获取学习笔记2021.11.10)
志豪的博客
01-26 2048
SpringWebFlux -3(5.3.12版学习笔记2021.11.10) 1.4.4 Model (模型) 与 Spring MVC 中的使用方式相同 您可以使用@ModelAttribute注解： 在method argument in @RequestMapping方法上，可以从模型创建或访问对象，并通过WebDataBinder将其绑定到请求。 作为@Controller或@ControllerAdvice类中的方法级 Comments，有助于在任何@RequestMapping方法调用
数据请求之AJAX
qq_50582468的博客
03-24 1829
在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，不刷新整个页面就可以进行数据局部更新。
掌握P5级Java面试技巧
热门推荐
Java程序员廖志伟
03-25 3万+
HashMap底层原理，扩容机制，jdk8以后会使用红黑树优化？红黑树和二叉平衡树的区别，红黑树和B树，B+树的区别，Mysql二大引擎索引底层实现，HashMap在多线程环境中为何出错？ConcurrentHashMap底层实现，CAS，原子引用，ABA问题，volatile，如何解决HashMap出现的OOM问题？（WeakHashMap） HashMap是Map的一个实现类，它是以键值对存储数据的，Key-Value都是Map.Entry中的属性。当我们向HashMap中存放一个元素(k1,v1)
原生Ajax的使用，四种请求方法示例（前后端代码）
kkkys_kkk的博客
01-13 2780
这样可以避免整个页面的刷新，提高用户体验。3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。
ASP.NET4高级程序设计(第4版) 3/3
10-29
13.5.2　获取关联数据　463 13.5.3　编辑数据　464 13.5.4　验证　464 13.6　使用QueryExtender控件　465 13.6.1　使用SearchExperssion　466 13.6.2　使用RangeExpression　467 13.6.3　使用PropertyExpression　...
ASPNET35开发大全第一章
01-12
5.17.1 表单验证控件（RequiredFieldValidator） 5.17.2 比较验证控件（CompareValidator） 5.17.3 范围验证控件（RangeValidator） 5.17.4 正则验证控件（RegularExpressionValidator） 5.17.5 自定义逻辑验证控件...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
04-01
-修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue中的事件
weixin_43390711的博客
05-16 162
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1110
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Vue.js的发展史（一）
2301_79683791的博客
05-15 756
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
vue实现第一个页面点击发送请求，将数据渲染到第二个页面中
05-27
在点击按钮时，我们需要使用 Vue.js 中的 AJAX 方法向服务器发送请求，获取数据。 在第二个页面中，你需要定义一个组件，用于渲染从服务器获取的数据。当第一个页面中的 AJAX 请求成功后，我们可以将获取到的数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值