精华内容
下载资源
问答
  • 解决步骤: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){

    }

    展开全文
  • 要实现的功能如下:image.png点击‘add’,添加test元素点击‘del’,删除此行部分代码如下:testtest:layui.use('layer', function(){var $ = layui.jquery, layer = layui.layer;var active = {addInput: ...

    要实现的功能如下:

    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输入框非空校验添加按钮:校验一次只能添加删除按钮:若删除的有内容给予提示,若为空直接删除动态给予按钮提示语:点击添加,请完成未填写的内容,点击...

    4be340dfbf1e488482bb74b61dee9226.png

    功能简介:

        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输入框非空校验添加按钮:校验一次只能添加删除按钮:若删除的有内容给予提示,若为空直接删除动态给予按钮提示语:点击添加,请完成未填写的内容,点击...

    be7d230496e660429518d8d987c82d9b.png

    功能简介:

        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:05
    done: 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 也是今非昔比了。 看到这么简洁的界面和完善的文档我反手就是一个赞! 页面中有一两个日期选择器的时候,处理还比较方便。 ...初始状态下只有这一...
  • 页面上的radio选项是动态生成的,默认生成的都是不被选中的,编辑的时候会从后台拿到选中的记录ID通过form.val方法赋值最后调用 form.render(‘radio’) 重新渲染。 发现始终都选不上,最后发现后台传输给前台的json...
  • 【场景】页面调用数据表格,在工具栏提供添加按钮,点击添加按钮,在页面弹出层,在层内添加新内容,点击保存按钮,添加到数据库后,在数据表格中新增一【解决方案】1设置数据表格实例时添加id属性table.render({ ...
  • 在select中记得添加一个id属性。1-1.博主是使用C#的webapi从后台获得数据。2.【JS】中的代码。在js中写一个方式,将获取到的数据遍历,然后举行绑定。记着”data[i].CategoryId”需要和使用Ajax请求的数据保持一致才...
  • 在select中记得添加一个id属性。1-1.博主是使用C#的webapi从后台获得数据。2.【JS】中的代码。在js中写一个方法,将获取到的数据遍历,然后进行绑定。记住"data[i].CategoryId"需要和使用Ajax请求的数据保持一致才...
  • 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加。上述功能官方并没有给出实现,需要自己手动解决。解决思路及方案简单分析:根据需求——动态添加,首先...
  • 没效果请留言,反正我的是有效果 /*选中样式*/ .layui-table-click{ background-color:#ddf2e9 !important; } ...table class="layui-hide" id="demo" lay-filter="test">... //动态添加背景色 obj.tr.s
  • 简单分析:根据需求——动态添加,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一的每一个单元格都有其样式,因此,要想动态添加的一Layui数据表格渲染...
  • Layui数据表格动态添加问题 Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现。 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格...
  • layui 以界面简洁美观而吸引了不少开发人员,在使用table组件时,需要能编辑表格内容,动态增加数据。编辑功能组件已支持。但动态增加数据好像没有支持,网上提供的方式是,获得组件的数据集再加入一个空记录或...
  • 项目需求:动态的增加表格数据,并且单元格允许支持下拉框。 解决步骤: 1、编写表格头部内容 <hr class="layui-bg-green"> <div class="layui-form-item"> <div class="l...
  • 动态添加行的实现(简略) <table class="mytable" > <tr> <td> <table class="table table-striped table-bordered table-condensed"> <!-- 定义表头 --> <thead> <...
  • html:资料清单添加编辑--%>删除请选择{{#var typeArr = layui.dict.options("service_materialType");layui.each(typeArr, function(index, item){}}{{item[1]}}{{# }) }}请选择{{#var certTypeArr = layui.dict....
  • 身为一个后端,前端不是很精通,选择使用X-admin的一个框架,在layui的表格添加中,是一个弹出框的形式实现的。 就是这样的,实际需要的像动态表格那个录入的表格。 花费了很长时间用js实现了在layui框架中的动态...
  • 实现内容:点击添加广告能够动态在后面添加,例如图1所示,并且还能够动态删除选定 图1 下面我们来具体讲下是如何实现该功能的 先贴上代码,layui的css与jq引用就不贴了,hahahahaha… html代码片段: <...
  • 步骤2: 在创建表窗口,表包含标题,一定要勾选,不然会自动给你添加标题的 步骤3: 在表格样式中有多种颜色和样式供选择,选择一个你喜欢的即可。 步骤4: 插入了超级表,就可以使用切片器了,切片器的功能...
  • layui table点击按钮添加、删除一

    万次阅读 2018-10-21 15:31:05
    首先这一篇是layui table点击按钮动态添加、删除一的实现。 当然别的也可以,比如添加div之类的,只是这里以layui table来举例。 layui table有多种渲染方式,由于方法渲染table的动态添加没有很好的实现,所以...
  • 目标:layui 实现点击按钮添加解决方案:方案1、table 是用转换静态表格的方式创建的,写一个button,每次点击按钮,就添加一个<tr> 标签;方案2、table 是用方法渲染的方式创建的,写一个button,每次点击...
  • 以前写过一篇自动渲染和静态表格的动态添加行layui table点击按钮添加、删除一行 今天学习别人的方法渲染表格动态添加、修改、删除行。 //表格渲染 var tableId = "dataTable"; var tableIns = table.render({ ...
  • 想要在已加载的layui数据表格动态的插入一,首先要在加载表格的时候设置它的event值。因为我这里是点击序号就添加,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你想要点击的表头...
  • 之前有一篇文章提到动态添加、删除一的实现方法 其中我在table里有laydate元素,动态添加的laydate不弹出日期选择,根据class渲染的时候会出现出了第一个可以正常显示,别的都闪退的情况。 最终是在每次添加的时候...

空空如也

空空如也

1 2 3
收藏数 46
精华内容 18
关键字:

layui动态添加行