项目需求：动态的增加表格行数据，并且单元格允许支持下拉框。
解决步骤：
1、编写表格头部内容
添加信息项(共0项)
信息项名称信息项编码信息项类型信息项长度是否为空显示序号是否共享共享方式是否公开公开方式操作
保存
2、编写动态生成数据行的JS代码，使用拼接HTML方式，具体逻辑可参考代码。(此方法比较繁琐，亦可用其他方式)
$(document).ready(function(){
layui.use(['jquery','table','form'], function(){
var table = layui.table,
$ = layui.jquery,
form = layui.form;
//添加行按钮
$(".add_tr_btn").click(function(){
var tableRow = HTable.ADD_TR(HTable.trNum);
var trObj = $("#resTable").children('tbody').find('tr');
var tbody = $("#resTable").find('tbody');
tbody.append(tableRow);
form.render();
});
//保存按钮
$(".add_res_btn").click(function(){
//var json = $(".res_field_form").serializeJSON();
var result = $(".res_field_form").parseFormJSON();
alert(JSON.stringify(result));
});
});
});
//定义HTable对象
window.HTable = {
trNum:1,
count:0,
DEL_TR:function(trNum){
$("#tr"+trNum).remove();
this.trNum--;
if(this.trNum==0){
this.trNum=1;
}
this.count--;
if(this.count<0){
this.count=0;
}
$("#count").text(this.count);
},
ADD_TR:function(trNum){
var IsNullHtml = "是否";
var IsShareHtml = "是否";
var ShareTypeHtml = "有条件无条件";
var IsPublicHtml = "是否";
var PublicTypeHtml = "有条件无条件";
var result = "
"+
"
"+
"
"+
"
"+
"
"+
"
"+IsNullHtml+"
"+
"
"+
"
"+IsShareHtml+"
"+
"
"+ShareTypeHtml+"
"+
"
"+IsPublicHtml+"
"+
"
"+PublicTypeHtml+"
"+
"
删除"+
"
";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}
}
说明：
1)HTable.DEL_TR是直接绑定到标签中，亦可考虑动态绑定的方式。
2)HTable对象中主要定义了增加行、删除行方法，并且以当前行的Index作为参数。
3)暂未考虑现实序号，由于动态选择删除行，需要重新绘制序号，增加了额外工作量，所以仅在顶部展示目前以增加的数量。
3、将动态表格中的数据行转成JSON数组的形式提交到后台。
//原生JS的方式实现构建JSON数组
$.fn.parseFormJSON = function (){
var result = [];
var json = {};
var data = this.serializeArray();
if(data.length==0){
return [];
}else{
for(var i=0; i
var key = data[i].name;
var value = data[i].value;
if(json.hasOwnProperty(key)){//当存在是
result.push(json);
//var newJson = {};
json = {};//
json[key] = value;
}else{
json[key] = value;
if(i==data.length-1){
result.push(json);
}
}
}
}
return result;
};
说明：1)可使用原生的JS方式实现组装成JSON数组；2)亦可以参考jquery.serializeJSON的实现方式，但此种方式提交的数据为JSON对象，需要到后台再进行一次转换才行。
ADD_TR:function(trNum){
var IsNullHtml = "是否";
var IsShareHtml = "是否";
var ShareTypeHtml = "有条件无条件";
var IsPublicHtml = "是否";
var PublicTypeHtml = "有条件无条件";
var result = "
"+
"
"+
"
"+
"
"+
"
"+
"
"+IsNullHtml+"
"+
"
"+
"
"+IsShareHtml+"
"+
"
"+ShareTypeHtml+"
"+
"
"+IsPublicHtml+"
"+
"
"+PublicTypeHtml+"
"+
"
删除"+
"
";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}

要实现的功能如下：
image.png
点击‘add’，添加一行test元素
点击‘del’，删除此行
部分代码如下：
test
test:
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer;
var active = {
addInput: function () {
var newInput =
'
\n' +
'\ttest:\n' +
'\t
\n' +
'\t\t\n' +
'\t
\n' +
'\t\n'+
'
';
$('#hahaha').append(newInput);
},
delInput: function (othis) {
othis.parent().remove();
}
};
//已加载完的元素用
$('.layui-btn').on('click', function () {
var othis = $(this), method = othis.data('method');
active[method].call(this, othis);
});
//动态加载元素用
$('#hahaha').on('click','.layui-btn', function () {
var othis = $(this), method = othis.data('method');
active[method].call(this, othis);
});
});

	

功能简介:
    VUE结合elementUI动态生成form表单
    文件上传验证
    input输入框非空校验
    添加按钮:校验一次只能添加一行
    删除按钮:若删除的行有内容给予提示,若为空直接删除
    动态给予按钮提示语:点击添加,请完成未填写的内容,点击删除...
代码示例
<template>    <div class="app-container">        <div class="filter-container">            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate" size="mini">                创建            el-button>        div>        <el-dialog :title="dialogStatusMap[dialogStatus] ? dialogStatusMap[dialogStatus].value : ''" :visible.sync="dialogFormVisible" width="55%">            <template v-if="dialogStatus === dialogStatusMap.create.key || dialogStatus === dialogStatusMap.edit.key">                <el-form ref="dataForm" :model="teamConfigFormData" label-width="100px"                          size="mini">                    <div class="moreRules">                        <div class="moreRulesIn" v-for="(item, index) in teamConfigFormData.teamConfigList" :key="item.key">                            <el-row>                                <el-col :span="2.5">                                    <el-form-item label="图标" :prop="'teamConfigList.' + index +'.iconFile'" @click.native="getIndexVal(index)">                                        <el-tooltip id="smallCss" effect="dark" content="文件格式:PNG 大小:1M以内" placement="top">                                            <el-upload                                                    :before-upload="beforeIconUpload"                                                    drag                                                    class="app-icon-uploader"                                                    action="action"                                                    :http-request="handleUploadingIcon"                                                    :show-file-list="false">                                                <img v-if="teamConfigFormData.teamConfigList[index].icon" :src="teamConfigFormData.teamConfigList[index].icon" style="width:28px; height: 28px">                                                <i v-else class="el-icon-plus" >i>                                            el-upload>                                        el-tooltip>                                    el-form-item>                                el-col>                                <el-col :span="8">                                    <el-form-item class="rules" label="项目KEY" :prop="'teamConfigList.' + index +'.teamKey'" :rules="[{required: true, message: '项目KEY是必填项'}]">                                        <el-input v-model="item.teamKey" placeholder="项目KEY" class="el-select_box">el-input>                                    el-form-item>                                el-col>                                <el-col :span="8">                                    <el-form-item class="rules" label="项目名称" :prop="'teamConfigList.' + index +'.teamName'" :rules="[{required: true, message: '项目名称是必填项'}]">                                        <el-input v-model="item.teamName" placeholder="项目名称" class="el-select_box">el-input>                                    el-form-item>                                el-col>                                <el-col :span="1">                                    <el-tooltip class="item" effect="dark" :content="addButtonMessage" placement="top">                                        <el-button v-show="index === 0" @click="addTeamConfig" @mouseenter.native="verifyAddButton()" size="mini" type="primary" icon="el-icon-plus" circle style="margin-left: 20%">el-button>                                    el-tooltip>                                    <el-tooltip class="item" effect="dark" :content="delButtonMessage" placement="top">                                        <el-button v-show="index > 0" @click="deleteTeamConfig(item, index)" @mouseenter.native="verifyDeleteButton(item)" size="mini" type="danger" icon="el-icon-delete" circle style="margin-left: 20%">el-button>                                    el-tooltip>                                el-col>                            el-row>                        div>                    div>                el-form>                <div slot="footer" class="dialog-footer">                    <el-button @click="showValue" size="mini" type="primary">                        ShowValue                    el-button>                    <el-button @click="addTeamConfig" size="mini" type="primary">                        添加                    el-button>                    <el-button @click="dialogFormVisible = false" size="mini">                        取消                    el-button>                    <el-button type="primary" @click="dialogStatus === dialogStatusMap.create.key?saveApplication():updateData()" size="mini">                        保存                    el-button>                div>            template>        el-dialog>    div>template><script>import {getAppInfos, insertAppInfo, updateAppInfo} from '@/api/euser-admin/team-admin';import waves from '@/directive/waves'; // waves directiveimport Pagination from '@/components/Pagination';import {dataStatusEnum} from '@/common/constant';import {uploadFile} from "@/api/app-store/file";import {getFileUrl} from "@/utils/file";const dialogStatusMap = {    edit: {key: 'edit', value: '编辑'},    create: {key: 'create', value: '创建'}};export default {    name: 'app-info',    components: {Pagination},    directives: {waves},    filters: {        statusTagFilter(status) {            let item = dataStatusEnum.find(item => item.key === status);            if (item) {                return item.tagType;            } else {                return status;            }        },        statusFilter(status) {            let item = dataStatusEnum.find(item => item.key === status);            if (item) {                return item.label;            } else {                return status;            }        }    },    data() {        return {            //-------租户配置的数据-begin-----------            disabledVal: false,            addButtonMessage: "点击添加",            delButtonMessage: "点击删除",            isAddNullValue: true,            isDeleteNullValue: true,            indexVal: undefined,            teamConfigFormData: {                configId: '我是配置Id',                teamConfigList: [{                    teamKey: '',                    teamName: '',                    icon: undefined,                    iconFile: undefined,                    /*teamURL: '',*/                }]            },            //-------租户配置的数据-end-------------        };    },    created() {        this.initData();        // this.getAppInfos();    },    methods: {        //-------租户配置的methods-begin-----------        getIndexVal(index) {            this.indexVal = index;            console.log("this.indexVal = index")            console.log(this.indexVal)        },        handleUploadingIcon(item) {            console.log("---item-----")            console.log(item)            this.teamConfigFormData.teamConfigList[this.indexVal].iconFile = item.file;            this.teamConfigFormData.teamConfigList[this.indexVal].icon = URL.createObjectURL(item.file);            // 刷新数据            this.$forceUpdate();        },        // 校验图片        beforeIconUpload(file) {            const isPNG = file.type === 'image/png';            const isLt1M = file.size / 1024 / 1024 < 1;            if (!isPNG) {                this.$message.error('上传图片只能是 PNG 格式!');            }            if (!isLt1M) {                this.$message.error('上传图片大小不能超过 1MB!');            }            return isPNG && isLt1M;        },        // 校验删除按钮        verifyDeleteButton(item) {            console.log("------item, index--------")            console.log(item);            let teamKey = item.teamKey;            let teamName = item.teamName;            if (teamKey) {                this.isDeleteNullValue = false;            } else if (teamName) {                this.isDeleteNullValue = false;            } else {                this.isDeleteNullValue = true;            }        },        // 校验添加按钮是否有效        verifyAddButton() {            let lastIndex = this.teamConfigFormData.teamConfigList.length;            let teamConfigList = this.teamConfigFormData.teamConfigList;            if (lastIndex > 0) {                for (let j = 0; j < lastIndex; j++) {                    let teamConfigListElement = teamConfigList[j];                    let teamKey = teamConfigListElement.teamKey;                    let teamName = teamConfigListElement.teamName;                    this.isAddNullValue = teamKey && teamName;                    if (this.isAddNullValue) {                        this.addButtonMessage = "点击添加"                    } else {                        this.addButtonMessage = "请完成未填写的内容"                        return;                    }                }            }        },        // 显示值        showValue() {            console.log("this.teamConfigFormData ======")            console.log(this.teamConfigFormData)            let length = this.teamConfigFormData.teamConfigList.length;            for (let i = 0; i < length; i++) {                let iconFile = this.teamConfigFormData.teamConfigList[i].iconFile;                if (i === 1) {                    iconFile = '';                }                if (!iconFile) {                    console.log(i + "    ---iconFile  没有value--")                    console.log(iconFile)                    continue;                } else {                    console.log(i + "    ---iconFile  +++++++有value--")                    console.log(iconFile)                }            }        },        // 数据初始化        initData() {            this.teamConfigFormData.teamConfigList = []        },        // 点击新增按钮        addTeamConfig() {            // 验证参数            this.verifyAddButton()            if (this.isAddNullValue) {                this.teamConfigFormData.teamConfigList.push({                    teamKey: '',                    teamName: '',                    iconFile: undefined,                })            }        },        // 点新建按钮时的初始化         addInitTeamConfig() {            this.teamConfigFormData.teamConfigList.push({                teamKey: '',                teamName: '',                iconFile: undefined,            })        },        // 删除行        deleteTeamConfig(item, index) {            // 被删除的input是否有值            this.verifyDeleteButton(item);            if (this.isDeleteNullValue) {                // 空值直接删除                this.index = this.teamConfigFormData.teamConfigList.indexOf(item)                if (index !== -1) {                    this.teamConfigFormData.teamConfigList.splice(index, 1)                }            } else {                // 有值给予提示                this.tooltipDelete(item, index);            }        },        tooltipDelete(item, index) {            this.$confirm('是否移除您刚填写的值?', '提示', {                confirmButtonText: '确定',                cancelButtonText: '取消',                type: 'warning'            }).then(() => {                this.index = this.teamConfigFormData.teamConfigList.indexOf(item)                if (index !== -1) {                    this.teamConfigFormData.teamConfigList.splice(index, 1)                }            }).catch(() => {            });        },        //-------租户配置的methods-end-----------        getAppInfos() {            this.listLoading = true;            getAppInfos(this.getAppInfosParams).then(response => {                this.list = response.content.list;                this.total = response.content.total;                this.listLoading = false;            });        },        handleFilter() {            this.getAppInfosParams.page = 1;            this.getAppInfos();        },        modifyStatus(id, status) {            let tips;            let successTips;            let cancelTips;            if (status === 1) {                tips = '确认恢复?';                successTips = '恢复成功';                cancelTips = '恢复取消';            } else if (status === 0) {                tips = '确认删除?';                successTips = '删除成功';                cancelTips = '删除取消';            } else {                this.$notify({                    title: '警告',                    message: '未知状态',                    type: 'warning',                    duration: 2000                });                return;            }            this.$confirm(tips, 'Warning', {                confirmButtonText: '确认',                cancelButtonText: '取消',                type: 'warning'            }).then(() => {                updateAppInfo({id: id, status}).then(() => {                    this.$notify({                        title: '成功',                        message: successTips,                        type: 'success',                        duration: 2000                    });                    this.handleFilter();                });            }).catch(() => {                this.$message({                    type: 'info',                    message: cancelTips                });            });        },        handleCreate() {            this.initData();            this.addInitTeamConfig();            this.resetTemp(this.userName);            this.dialogStatus = this.dialogStatusMap.create.key;            this.dialogFormVisible = true;            this.$nextTick(() => {                this.$refs['dataForm'].clearValidate();            });        },        // 保存文件        saveApplication() {            console.log("wo 来到了 上传的方法-------")            // 多文件上传            let teamConfigListLength = this.teamConfigFormData.teamConfigList.length;            if (teamConfigListLength === 0) {                return;            }            // 本地环境的文件是默认的            if (process.env.NODE_ENV === 'development') {                for (let i = 0; i < teamConfigListLength; i++) {                    console.log("我是循环中的方法")                    console.log(process.env.NODE_ENV)                    this.teamConfigFormData.teamConfigList[i].icon = 'https://s3.cn-north-1.jdcloud-oss.com/eepaas-filecenter-pre/H9vSpvxDJQmtKXFqVSCmOic2y.png?response-content-disposition=filename%2A%3DUTF-8%27%2712.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20201022T080941Z&X-Amz-SignedHeaders=host&X-Amz-Expires=604800&X-Amz-Credential=CFDC5A51C7123F3EA1517CBC874410A6%2F20201022%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Signature=d5c96567e8cf1a2a7bde5b749d2a6cbae6bbfa451675f93d6bf488339d2f1d10';                    // this.teamConfigFormData.teamConfigList[i].icon = 12345;                    this.teamConfigFormData.teamConfigList[i].iconFile = null;                }                console.log("----上传文件放回的 -总的  全的this.teamConfigFormData.teamConfigList---")                console.log(this.teamConfigFormData.teamConfigList)                this.createData();                return;            }            // 预发和生产的环境是真实上传的文件            for (let i = 0; i < teamConfigListLength; i++) {                let iconFile = this.teamConfigFormData.teamConfigList[i].iconFile;                if (!iconFile) {                    continue;                }                let data = new FormData();                data.append('appKey', process.env.VUE_APP_FILE_SERVICE_APP_KEY);                data.append('fileType', 'image/png');                data.append('needAuthn', '0');                data.append('file', iconFile);                console.log("-----let data = new FormData()-------");                console.log(data)                // 这是一个上传文件的通用方法,直接发回一个url                uploadFile(data).then((response) => {                    this.teamConfigFormData.teamConfigList[i].icon = getFileUrl(response.content.fileDownloadUrl);                    console.log("---------查看上传后的URL----------")                    console.log(this.teamConfigFormData.teamConfigList[i].icon)                    console.log("----上传文件放回的 -总的  全的---response----")                    console.log(response)                    console.log("----上传文件放回的 -总的  全的+++teamConfigList+++")                    console.log(this.teamConfigFormData.teamConfigList)                    this.teamConfigFormData.teamConfigList[i].iconFile = null;                });            }            this.createData();        },        /* 新增的方法 */        createData() {            this.$refs['dataForm'].validate((valid) => {                if (valid) {                    this.temp.id = undefined;                    // 执行 insert                    insertAppInfo(this.teamConfigFormData).then((response) => {                        console.log("-------------")                        console.log(response)                        /*this.dialogFormVisible = false;                        this.$notify({                            title: '成功',                            message: '创建成功',                            type: 'success',                            duration: 2000                        });*/                        // 刷新列表                        // this.handleFilter();                    });                }            });        },    }};script><style scoped>style><style>    /*  **********上传图片的样式**********  */    #smallCss .el-upload .el-upload-dragger {        width: 28px;        height: 28px;    }    .app-icon-uploader .el-upload .el-upload-dragger {        width: 28px;        height: 28px;    }style>

	

功能简介:
    VUE结合elementUI动态生成form表单
    文件上传验证
    input输入框非空校验
    添加按钮:校验一次只能添加一行
    删除按钮:若删除的行有内容给予提示,若为空直接删除
    动态给予按钮提示语:点击添加,请完成未填写的内容,点击删除...
代码示例
<template>    <div class="app-container">        <div class="filter-container">            <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate" size="mini">                创建            el-button>        div>        <el-dialog :title="dialogStatusMap[dialogStatus] ? dialogStatusMap[dialogStatus].value : ''" :visible.sync="dialogFormVisible" width="55%">            <template v-if="dialogStatus === dialogStatusMap.create.key || dialogStatus === dialogStatusMap.edit.key">                <el-form ref="dataForm" :model="teamConfigFormData" label-width="100px"                          size="mini">                    <div class="moreRules">                        <div class="moreRulesIn" v-for="(item, index) in teamConfigFormData.teamConfigList" :key="item.key">                            <el-row>                                <el-col :span="2.5">                                    <el-form-item label="图标" :prop="'teamConfigList.' + index +'.iconFile'" @click.native="getIndexVal(index)">                                        <el-tooltip id="smallCss" effect="dark" content="文件格式:PNG 大小:1M以内" placement="top">                                            <el-upload                                                    :before-upload="beforeIconUpload"                                                    drag                                                    class="app-icon-uploader"                                                    action="action"                                                    :http-request="handleUploadingIcon"                                                    :show-file-list="false">                                                <img v-if="teamConfigFormData.teamConfigList[index].icon" :src="teamConfigFormData.teamConfigList[index].icon" style="width:28px; height: 28px">                                                <i v-else class="el-icon-plus" >i>                                            el-upload>                                        el-tooltip>                                    el-form-item>                                el-col>                                <el-col :span="8">                                    <el-form-item class="rules" label="项目KEY" :prop="'teamConfigList.' + index +'.teamKey'" :rules="[{required: true, message: '项目KEY是必填项'}]">                                        <el-input v-model="item.teamKey" placeholder="项目KEY" class="el-select_box">el-input>                                    el-form-item>                                el-col>                                <el-col :span="8">                                    <el-form-item class="rules" label="项目名称" :prop="'teamConfigList.' + index +'.teamName'" :rules="[{required: true, message: '项目名称是必填项'}]">                                        <el-input v-model="item.teamName" placeholder="项目名称" class="el-select_box">el-input>                                    el-form-item>                                el-col>                                <el-col :span="1">                                    <el-tooltip class="item" effect="dark" :content="addButtonMessage" placement="top">                                        <el-button v-show="index === 0" @click="addTeamConfig" @mouseenter.native="verifyAddButton()" size="mini" type="primary" icon="el-icon-plus" circle style="margin-left: 20%">el-button>                                    el-tooltip>                                    <el-tooltip class="item" effect="dark" :content="delButtonMessage" placement="top">                                        <el-button v-show="index > 0" @click="deleteTeamConfig(item, index)" @mouseenter.native="verifyDeleteButton(item)" size="mini" type="danger" icon="el-icon-delete" circle style="margin-left: 20%">el-button>                                    el-tooltip>                                el-col>                            el-row>                        div>                    div>                el-form>                <div slot="footer" class="dialog-footer">                    <el-button @click="showValue" size="mini" type="primary">                        ShowValue                    el-button>                    <el-button @click="addTeamConfig" size="mini" type="primary">                        添加                    el-button>                    <el-button @click="dialogFormVisible = false" size="mini">                        取消                    el-button>                    <el-button type="primary" @click="dialogStatus === dialogStatusMap.create.key?saveApplication():updateData()" size="mini">                        保存                    el-button>                div>            template>        el-dialog>    div>template><script>import {getAppInfos, insertAppInfo, updateAppInfo} from '@/api/euser-admin/team-admin';import waves from '@/directive/waves'; // waves directiveimport Pagination from '@/components/Pagination';import {dataStatusEnum} from '@/common/constant';import {uploadFile} from "@/api/app-store/file";import {getFileUrl} from "@/utils/file";const dialogStatusMap = {    edit: {key: 'edit', value: '编辑'},    create: {key: 'create', value: '创建'}};export default {    name: 'app-info',    components: {Pagination},    directives: {waves},    filters: {        statusTagFilter(status) {            let item = dataStatusEnum.find(item => item.key === status);            if (item) {                return item.tagType;            } else {                return status;            }        },        statusFilter(status) {            let item = dataStatusEnum.find(item => item.key === status);            if (item) {                return item.label;            } else {                return status;            }        }    },    data() {        return {            //-------租户配置的数据-begin-----------            disabledVal: false,            addButtonMessage: "点击添加",            delButtonMessage: "点击删除",            isAddNullValue: true,            isDeleteNullValue: true,            indexVal: undefined,            teamConfigFormData: {                configId: '我是配置Id',                teamConfigList: [{                    teamKey: '',                    teamName: '',                    icon: undefined,                    iconFile: undefined,                    /*teamURL: '',*/                }]            },            //-------租户配置的数据-end-------------        };    },    created() {        this.initData();        // this.getAppInfos();    },    methods: {        //-------租户配置的methods-begin-----------        getIndexVal(index) {            this.indexVal = index;            console.log("this.indexVal = index")            console.log(this.indexVal)        },        handleUploadingIcon(item) {            console.log("---item-----")            console.log(item)            this.teamConfigFormData.teamConfigList[this.indexVal].iconFile = item.file;            this.teamConfigFormData.teamConfigList[this.indexVal].icon = URL.createObjectURL(item.file);            // 刷新数据            this.$forceUpdate();        },        // 校验图片        beforeIconUpload(file) {            const isPNG = file.type === 'image/png';            const isLt1M = file.size / 1024 / 1024 < 1;            if (!isPNG) {                this.$message.error('上传图片只能是 PNG 格式!');            }            if (!isLt1M) {                this.$message.error('上传图片大小不能超过 1MB!');            }            return isPNG && isLt1M;        },        // 校验删除按钮        verifyDeleteButton(item) {            console.log("------item, index--------")            console.log(item);            let teamKey = item.teamKey;            let teamName = item.teamName;            if (teamKey) {                this.isDeleteNullValue = false;            } else if (teamName) {                this.isDeleteNullValue = false;            } else {                this.isDeleteNullValue = true;            }        },        // 校验添加按钮是否有效        verifyAddButton() {            let lastIndex = this.teamConfigFormData.teamConfigList.length;            let teamConfigList = this.teamConfigFormData.teamConfigList;            if (lastIndex > 0) {                for (let j = 0; j < lastIndex; j++) {                    let teamConfigListElement = teamConfigList[j];                    let teamKey = teamConfigListElement.teamKey;                    let teamName = teamConfigListElement.teamName;                    this.isAddNullValue = teamKey && teamName;                    if (this.isAddNullValue) {                        this.addButtonMessage = "点击添加"                    } else {                        this.addButtonMessage = "请完成未填写的内容"                        return;                    }                }            }        },        // 显示值        showValue() {            console.log("this.teamConfigFormData ======")            console.log(this.teamConfigFormData)            let length = this.teamConfigFormData.teamConfigList.length;            for (let i = 0; i < length; i++) {                let iconFile = this.teamConfigFormData.teamConfigList[i].iconFile;                if (i === 1) {                    iconFile = '';                }                if (!iconFile) {                    console.log(i + "    ---iconFile  没有value--")                    console.log(iconFile)                    continue;                } else {                    console.log(i + "    ---iconFile  +++++++有value--")                    console.log(iconFile)                }            }        },        // 数据初始化        initData() {            this.teamConfigFormData.teamConfigList = []        },        // 点击新增按钮        addTeamConfig() {            // 验证参数            this.verifyAddButton()            if (this.isAddNullValue) {                this.teamConfigFormData.teamConfigList.push({                    teamKey: '',                    teamName: '',                    iconFile: undefined,                })            }        },        // 点新建按钮时的初始化         addInitTeamConfig() {            this.teamConfigFormData.teamConfigList.push({                teamKey: '',                teamName: '',                iconFile: undefined,            })        },        // 删除行        deleteTeamConfig(item, index) {            // 被删除的input是否有值            this.verifyDeleteButton(item);            if (this.isDeleteNullValue) {                // 空值直接删除                this.index = this.teamConfigFormData.teamConfigList.indexOf(item)                if (index !== -1) {                    this.teamConfigFormData.teamConfigList.splice(index, 1)                }            } else {                // 有值给予提示                this.tooltipDelete(item, index);            }        },        tooltipDelete(item, index) {            this.$confirm('是否移除您刚填写的值?', '提示', {                confirmButtonText: '确定',                cancelButtonText: '取消',                type: 'warning'            }).then(() => {                this.index = this.teamConfigFormData.teamConfigList.indexOf(item)                if (index !== -1) {                    this.teamConfigFormData.teamConfigList.splice(index, 1)                }            }).catch(() => {            });        },        //-------租户配置的methods-end-----------        getAppInfos() {            this.listLoading = true;            getAppInfos(this.getAppInfosParams).then(response => {                this.list = response.content.list;                this.total = response.content.total;                this.listLoading = false;            });        },        handleFilter() {            this.getAppInfosParams.page = 1;            this.getAppInfos();        },        modifyStatus(id, status) {            let tips;            let successTips;            let cancelTips;            if (status === 1) {                tips = '确认恢复?';                successTips = '恢复成功';                cancelTips = '恢复取消';            } else if (status === 0) {                tips = '确认删除?';                successTips = '删除成功';                cancelTips = '删除取消';            } else {                this.$notify({                    title: '警告',                    message: '未知状态',                    type: 'warning',                    duration: 2000                });                return;            }            this.$confirm(tips, 'Warning', {                confirmButtonText: '确认',                cancelButtonText: '取消',                type: 'warning'            }).then(() => {                updateAppInfo({id: id, status}).then(() => {                    this.$notify({                        title: '成功',                        message: successTips,                        type: 'success',                        duration: 2000                    });                    this.handleFilter();                });            }).catch(() => {                this.$message({                    type: 'info',                    message: cancelTips                });            });        },        handleCreate() {            this.initData();            this.addInitTeamConfig();            this.resetTemp(this.userName);            this.dialogStatus = this.dialogStatusMap.create.key;            this.dialogFormVisible = true;            this.$nextTick(() => {                this.$refs['dataForm'].clearValidate();            });        },        // 保存文件        saveApplication() {            console.log("wo 来到了 上传的方法-------")            // 多文件上传            let teamConfigListLength = this.teamConfigFormData.teamConfigList.length;            if (teamConfigListLength === 0) {                return;            }            // 本地环境的文件是默认的            if (process.env.NODE_ENV === 'development') {                for (let i = 0; i < teamConfigListLength; i++) {                    console.log("我是循环中的方法")                    console.log(process.env.NODE_ENV)                    this.teamConfigFormData.teamConfigList[i].icon = 'https://s3.cn-north-1.jdcloud-oss.com/eepaas-filecenter-pre/H9vSpvxDJQmtKXFqVSCmOic2y.png?response-content-disposition=filename%2A%3DUTF-8%27%2712.png&response-content-type=image%2Fpng&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20201022T080941Z&X-Amz-SignedHeaders=host&X-Amz-Expires=604800&X-Amz-Credential=CFDC5A51C7123F3EA1517CBC874410A6%2F20201022%2Fcn-north-1%2Fs3%2Faws4_request&X-Amz-Signature=d5c96567e8cf1a2a7bde5b749d2a6cbae6bbfa451675f93d6bf488339d2f1d10';                    // this.teamConfigFormData.teamConfigList[i].icon = 12345;                    this.teamConfigFormData.teamConfigList[i].iconFile = null;                }                console.log("----上传文件放回的 -总的  全的this.teamConfigFormData.teamConfigList---")                console.log(this.teamConfigFormData.teamConfigList)                this.createData();                return;            }            // 预发和生产的环境是真实上传的文件            for (let i = 0; i < teamConfigListLength; i++) {                let iconFile = this.teamConfigFormData.teamConfigList[i].iconFile;                if (!iconFile) {                    continue;                }                let data = new FormData();                data.append('appKey', process.env.VUE_APP_FILE_SERVICE_APP_KEY);                data.append('fileType', 'image/png');                data.append('needAuthn', '0');                data.append('file', iconFile);                console.log("-----let data = new FormData()-------");                console.log(data)                // 这是一个上传文件的通用方法,直接发回一个url                uploadFile(data).then((response) => {                    this.teamConfigFormData.teamConfigList[i].icon = getFileUrl(response.content.fileDownloadUrl);                    console.log("---------查看上传后的URL----------")                    console.log(this.teamConfigFormData.teamConfigList[i].icon)                    console.log("----上传文件放回的 -总的  全的---response----")                    console.log(response)                    console.log("----上传文件放回的 -总的  全的+++teamConfigList+++")                    console.log(this.teamConfigFormData.teamConfigList)                    this.teamConfigFormData.teamConfigList[i].iconFile = null;                });            }            this.createData();        },        /* 新增的方法 */        createData() {            this.$refs['dataForm'].validate((valid) => {                if (valid) {                    this.temp.id = undefined;                    // 执行 insert                    insertAppInfo(this.teamConfigFormData).then((response) => {                        console.log("-------------")                        console.log(response)                        /*this.dialogFormVisible = false;                        this.$notify({                            title: '成功',                            message: '创建成功',                            type: 'success',                            duration: 2000                        });*/                        // 刷新列表                        // this.handleFilter();                    });                }            });        },    }};script><style scoped>style><style>    /*  **********上传图片的样式**********  */    #smallCss .el-upload .el-upload-dragger {        width: 28px;        height: 28px;    }    .app-icon-uploader .el-upload .el-upload-dragger {        width: 28px;        height: 28px;    }style>