-
layui动态添加input_Layui数据表格动态添加行的处理方式(原生HTML方式)
2020-12-20 14:47:19解决步骤:1、编写表格头部内容添加信息项(共0项)信息项名称信息项编码信息项类型信息项长度是否为空显示序号是否共享共享方式是否公开公开方式操作保存2、编写动态生成数据行的JS代码,使用拼接HTML方式,具体...项目需求:动态的增加表格行数据,并且单元格允许支持下拉框。
解决步骤:
1、编写表格头部内容
信息项名称信息项编码信息项类型信息项长度是否为空显示序号是否共享共享方式是否公开公开方式操作
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){
}
-
layui可以动态添加div吗_layui 动态添加的元素事件无响应解决方案
2020-12-19 11:17:34要实现的功能如下:image.png点击‘add’,添加一行test元素点击‘del’,删除此行部分代码如下:testtest:layui.use('layer', function(){var $ = layui.jquery, layer = layui.layer;var active = {addInput: ...要实现的功能如下:
image.png
点击‘add’,添加一行test元素
点击‘del’,删除此行
部分代码如下:
testtest:
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer;
var active = {
addInput: function () {
var newInput =
'
\n' +';'\ttest:\n' +
'\t
\n' +\n' +'\t\t\n' +
'\t
'\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);
});
});
-
layui动态添加input_VUE动态添加elformitem
2021-01-01 03:53:05功能简介:VUE结合elementUI动态生成form表单文件上传验证input输入框非空校验添加按钮:校验一次只能添加一行删除按钮:若删除的行有内容给予提示,若为空直接删除动态给予按钮提示语:点击添加,请完成未填写的内容,点击...功能简介:
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>
-
layui动态添加输入框_VUE动态添加elformitem
2020-11-22 22:26:23功能简介:VUE结合elementUI动态生成form表单文件上传验证input输入框非空校验添加按钮:校验一次只能添加一行删除按钮:若删除的行有内容给予提示,若为空直接删除动态给予按钮提示语:点击添加,请完成未填写的内容,点击...功能简介:
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>
-
layui动态合并行
2020-04-30 14:10:05done: function (res, curr, count) { console.log(res.data) ...//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数 var columsName ... -
layui 动态添加多个日期选择控件
2018-09-11 15:18:19作为 layui 2.0 的核心组成之一,layDate 也是今非昔比了。 看到这么简洁的界面和完善的文档我反手就是一个赞! 页面中有一两个日期选择器的时候,处理还比较方便。 ...初始状态下只有这一行... -
踩坑记录:layui动态添加的radio没法赋值
2020-10-23 00:42:02页面上的radio选项是动态生成的,默认生成的都是不被选中的,编辑的时候会从后台拿到选中的记录ID通过form.val方法赋值最后调用 form.render(‘radio’) 重新渲染。 发现始终都选不上,最后发现后台传输给前台的json... -
【教程】layui动态表格添加新行
2019-03-22 13:37:13【场景】页面调用数据表格,在工具栏提供添加按钮,点击添加按钮,在页面弹出层,在层内添加新内容,点击保存按钮,添加到数据库后,在数据表格中新增一行【解决方案】1设置数据表格实例时添加id属性table.render({ ... -
layui option 动态添加_动态在LayUI中添加Select下拉框选项,添加Option
2021-01-12 06:36:47在select中记得添加一个id属性。1-1.博主是使用C#的webapi从后台获得数据。2.【JS】中的代码。在js中写一个方式,将获取到的数据遍历,然后举行绑定。记着”data[i].CategoryId”需要和使用Ajax请求的数据保持一致才... -
layui option 动态添加_如何动态在LayUI中添加Select下拉框选项和Option?
2020-12-29 06:46:44在select中记得添加一个id属性。1-1.博主是使用C#的webapi从后台获得数据。2.【JS】中的代码。在js中写一个方法,将获取到的数据遍历,然后进行绑定。记住"data[i].CategoryId"需要和使用Ajax请求的数据保持一致才行... -
layui的表格可以动态添加行吗_Layui给数据表格动态添加一行并跳转到添加行所在页的方法...
2021-01-17 02:53:14笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行。上述功能官方并没有给出实现,需要自己手动解决。解决思路及方案简单分析:根据需求——动态添加一行,首先... -
layui 动态修改选中行颜色
2020-11-20 17:16:42没效果请留言,反正我的是有效果 /*选中行样式*/ .layui-table-click{ background-color:#ddf2e9 !important; } ...table class="layui-hide" id="demo" lay-filter="test">... //动态添加背景色 obj.tr.s -
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2020-12-10 08:24:46简单分析:根据需求——动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染... -
Layui给数据表格动态添加一行并跳转到添加行所在页
2018-01-20 01:48:53Layui数据表格动态添加一行问题 Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格... -
layui的表格可以动态添加行吗_layui 表格组件中实现动态增加数据行的一种方式...
2021-01-27 04:29:55layui 以界面简洁美观而吸引了不少开发人员,在使用table组件时,需要能编辑表格内容,动态增加数据行。编辑功能组件已支持。但动态增加数据行好像没有支持,网上提供的方式是,获得组件的数据集再加入一个空记录或... -
Layui数据表格动态添加行的处理方式(原生HTML方式)
2019-09-11 20:35:52项目需求:动态的增加表格行数据,并且单元格允许支持下拉框。 解决步骤: 1、编写表格头部内容 <hr class="layui-bg-green"> <div class="layui-form-item"> <div class="l... -
layui+js动态添加行时删除行后list集合序号没有被删除问题
2021-02-19 18:18:58动态添加行的实现(简略) <table class="mytable" > <tr> <td> <table class="table table-striped table-bordered table-condensed"> <!-- 定义表头 --> <thead> <... -
layui可以动态添加div吗_00028-layui 表单有子列表,如何动态新增和保存(表格table行编辑)?...
2020-12-19 11:17:30html:资料清单添加编辑--%>删除请选择{{#var typeArr = layui.dict.options("service_materialType");layui.each(typeArr, function(index, item){}}{{item[1]}}{{# }) }}请选择{{#var certTypeArr = layui.dict.... -
动态表格的实现(layui动态表格实现)
2020-03-14 11:34:39身为一个后端,前端不是很精通,选择使用X-admin的一个框架,在layui的表格添加中,是一个弹出框的形式实现的。 就是这样的,实际需要的像动态表格那个录入的表格。 花费了很长时间用js实现了在layui框架中的动态... -
关于layui动态上传图片upload的使用方法
2019-09-04 10:25:39实现内容:点击添加广告能够动态在后面添加一行,例如图1所示,并且还能够动态删除选定行 图1 下面我们来具体讲下是如何实现该功能的 先贴上代码,layui的css与jq引用就不贴了,hahahahaha… html代码片段: <... -
layui的表格可以动态添加行吗_答疑分享052:插入表格,数据分析更方便
2020-12-24 05:56:01步骤2: 在创建表窗口,表包含标题,一定要勾选,不然会自动给你添加一行标题行的 步骤3: 在表格样式中有多种颜色和样式供选择,选择一个你喜欢的即可。 步骤4: 插入了超级表,就可以使用切片器了,切片器的功能... -
layui table点击按钮添加、删除一行
2018-10-21 15:31:05首先这一篇是layui table点击按钮动态添加、删除一行的实现。 当然别的也可以,比如添加div之类的,只是这里以layui table来举例。 layui table有多种渲染方式,由于方法渲染table的动态添加没有很好的实现,所以... -
layui 实现点击按钮添加一行(方法渲染创建的table)-动态生成表格
2019-04-12 21:27:35目标:layui 实现点击按钮添加一行解决方案:方案1、table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个<tr> 标签;方案2、table 是用方法渲染的方式创建的,写一个button,每次点击... -
layui table 方法渲染添加、修改、删除行
2020-07-29 16:24:23以前写过一篇自动渲染和静态表格的动态添加行: layui table点击按钮添加、删除一行 今天学习别人的方法渲染表格动态添加、修改、删除行。 //表格渲染 var tableId = "dataTable"; var tableIns = table.render({ ... -
Layui数据表格中动态插入行&&插入下拉框
2019-06-17 15:31:33想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值。因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你想要点击的表头... -
动态添加的layui date标签,不弹出日期选择
2018-10-21 16:49:55之前有一篇文章提到动态添加、删除一行的实现方法 其中我在table里有laydate元素,动态添加的laydate不弹出日期选择,根据class渲染的时候会出现出了第一个可以正常显示,别的都闪退的情况。 最终是在每次添加的时候...
-
go定时任务
-
物联网基础篇:快速玩转MQTT
-
写一个函数求一个数的二进制补码中有多少个1
-
linux内核配置make-menuconfig菜单详解.doc
-
Galera 高可用 MySQL 集群(PXC v5.6 + Ngin
-
PHY寄存器
-
NFS 实现高可用(DRBD + heartbeat)
-
WordPress的安装和使用步骤
-
QT5.12Samp2019.zip
-
Java ThreadLocal
-
Samba 服务配置与管理
-
BudgetBuddy:Python预算应用程序,可轻松进行收入预算。 该项目目前仍在开发中,尚无发布。 该项目基于Easy Budget的想法,但具有更新的编程知识-源码
-
【布道者】Linux极速入门
-
哈工大停用词表.zip
-
PPTP_NNN 服务生产环境实战教程
-
【Python-随到随学】 FLask第一周
-
springboot中配置了拦截器后,拦截器无效的解决方案之一
-
gitee码云
-
零基础入门学习Java难度大吗?
-
生成接口文档(word)