vue.js项目开发中的弹框思路

Lemon今天学习了吗

已于 2022-04-24 14:02:55 修改

阅读量573

点赞数

分类专栏： vue 文章标签： elementui vue.js

于 2022-03-02 17:33:18 首次发布

本文链接：https://blog.csdn.net/weixin_47978760/article/details/122964983

版权

vue 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文介绍了JavaScript在数据处理中的几种常见技巧，包括使用filter和find移除数组元素，处理下拉框数据以满足保存参数需求，实现数据回显以及保存时的参数组装。在处理过程中强调了数据操作的一致性和下拉框选中值的实时转换。同时，概括了弹框内容保存与回显的处理思路，强调了数据操作和回显的准确性。

摘要由CSDN通过智能技术生成

效果展示：

1.指定去除对象数组里的某个对象。

实例1：去掉流程图的流程节点的开始节点。

方式一：使用filter

    let nodes = [
        { name: '开始', nodeId: 'Start1', type: 'start' },
        { name: '受理', nodeId: 'SL', type: 'userTask' },
        { name: '审批', nodeId: 'SP', type: 'userTask' },
        { name: '通知', nodeId: 'TZ', type: 'userTask' }
    ];
    // 过滤掉不符合条件的
    nodes = nodes.filter(function (item) {
        return item.nodeId != 'Start1' || item.type != 'start';
    });
    console.log(nodes);

方式二：使用find+filter

            //通过接口获取到数据
            let nodes = [
                { name: '开始', nodeId: 'Start1', type: 'start' },
                { name: '受理', nodeId: 'SL', type: 'userTask' },
                { name: '审批', nodeId: 'SP', type: 'userTask' },
                { name: '通知', nodeId: 'TZ', type: 'userTask' }
            ];

            //不显示开始节点
            //1.使用find函数找到第一次符合条件的节点放到obj对象
            let obj = nodes.find(
                (item) => item.nodeId === 'Start1' || item.type === 'start'
            );

            //2.如果存在开始节点，则使用filter过滤
            if (!!obj) {
                nodes = nodes.filter((item) => item.nodeId !== obj.nodeId);
            }

2.对下拉框的数据进行操作，使得符合保存时的传参要求。

实例1：在表格中有多个下拉框，在选中不同数据时，保存参数也随之发生改变，变成对象的形式用于保存时传参。

//页面结构
<Table border ref="table" :columns="tableColumns" :data="tableData" :loading="loading">
    //第一个下拉框
    <template slot-scope="{ row, index }" slot="prevScript">
        <Select v-model="row.prevScript.configId" clearable :filterable="true" @on-change="handleChangeFLowScript($event,index,'prev')" :transfer="true">
            <Option v-for="(item, index) in toolsScriptList" :value="item.value" :key="item.index">                                        
                 {{ item.text }}
            </Option>
        </Select>
    </template>
    //第二个下拉框
    <template slot-scope="{ row, index }" slot="script">
        <Select v-model="row.script.configId" clearable :filterable="true" @on-change="handleChangeFLowScript($event,index,'')" :transfer="true">
            <Option v-for="(item, index) in toolsScriptList" :value="item.value" :key="item.index">        
                 {{ item.text }}
            </Option>
        </Select>
    </template>
</Table>

//数据格式操作一：tableData[{toolButtons:{configId:'xxx',configName:'yyy'},aaa:'...',...},{...},...]
 //改变数据             值、索引，两个下拉框类型
handleChangeFLowScript(val, index, type) {
    //prevScript----第一个下拉框，script-----第二个下拉框
    let fields = type === 'prev' ? 'prevScript' : 'script';
    //在下拉的数据中找到选中的数据
      let obj = this.scriptList.find(
            (item) => item.value == val
        );

    //使用$set 在toolButtons数组中添加包含configId和configName的对象
    this.$set(this.toolButtons[index][fields], 'configId', val || '');
    this.$set(this.toolButtons[index][fields], 'configName', (obj && obj.text) || '' );
},

//数据格式操作二:tableData[{scriptKey:'xxx',scriptName:'yyy',...,...},{...},...]
// 编辑table之后，更新数据
handleChangeFLowScript(val, index) {
    if (!!val) {
        let obj = this.scriptList.find(
            (item) => item.value == val
        );
        if (!!obj) {
            this.tableData[index].scriptKey = val;
            this.tableData[index].scriptName = obj.text;
        }
    }
},

3.回显数据是否与初始数据对应显示

实例1. 在弹框下拉框选中数据保存之后，再次打开弹框要将选择数据与每一项对应上。

    //回显接口：xxx
    xxx(params).then((res) => {
        this.loading = false;
        if (res && res.state && !!res.data) {
            this.nodeList = res.data; //回显数据：nodeList[]；初始数据：datas[]
            datas.forEach((item) => {
                //obj：回显数据id与初始数据id对应上的数据
                let obj = this.nodeList.find(
                    (obj) => obj.defNodeId == item.nodeId
                );
                if (!!obj) {
                    //将回显的下拉框数据的赋值给初始数据上的下拉框显示
                    item.scriptKey = obj.scriptKey;
                    item.scriptName = obj.scriptName;
                } else {
                    item.scriptKey = '';
                    item.scriptName = '';
                }
            });
            //将初始数据datas[]给table表格tableData[]来展示
            this.tableData = datas;
        }
    });

4.保存时参数处理

实例1：将参数处理成如下图形式，如何组装jsonStr？

将表格的数据循环组装出对象形式，使用数组的push方法追加对象到jsonStr里面。

    // 确定
    submit() {
        let jsonStr = [];
        if (!!this.tableData && this.tableData.length > 0) {
            //表格数据tableData[]
            this.tableData.forEach((item) => {
                let obj = {
                    defNodeId: item.nodeId, //初始时获取
                    opinionScriptKey: item.scriptKey,    //下拉框的value
                    opinionScriptName: item.scriptName    //下拉框的text
                };
                jsonStr.push(obj);
            });
        }
        let params = {
            appId: this.rowData.systemId,
            defProKey: this.rowData.defKey,
            jsonStr: JSON.stringify(jsonStr)     //序列化成json字符串
        };
        this.loading = true;
        //保存接口xxx
        xxx(params).then((res) => {
            this.loading = false;
            if (res.state) {
                this.utils.success('保存成功！');
                this.cancel();
            } else {
                this.utils.error(res.message || res.msg || '保存失败！');
            }
        });
    },

5.关于弹框内容填写保存与回显的处理思想：

（1）弹框内静态内容实现；

（2）初始化的时候通过接口获取数据展示，获取下拉框数据；

（3）给下拉框数据加改变触发的事件，让数据在选中时就已经变成保存所需结构；

（4）点击保存触发方法，参数拼接，调用保存接口；

（5）保存成功后调用数据回显接口；

注意：

a. 数据的操作尽量都放在同一个数组等容器中进行，如表格<Table border ref="table" :columns="tableColumns" :data="tableData">则在tableData数组内操作；

b.下拉框选中数据的发生改变的同时要将其组装添加到表格数组容器tableData[ ]中；

c. 每条展示的数据必须与所对应的下拉框选中数据对应上，在这里需要循环判断回显接口的nodeId是否与初始时调用的展示接口中的defNodeId是否相等，相等则将下拉框等数据替换d到该条数据的对应字段显示;