表单新增列的图标,以及编辑表单时的渲染列后面的添加和删除的图标

function createRoleList(arr, isAdd, $row) {
    var name = arr[0].name;
    var account = arr[0].id;
    var code = arr[0].code;
    var title = arr[0].title || '';
    if (isAdd) {
        var list = $("#tpl-list");
        var html = list.html();
        html = html.replace("%{item.name}", name);
        html = html.replace("%{item.title}", title);
        html = html.replace("%{item.id}", account);
        html = html.replace("%{item.code}", code);
        html = html.replace("%{item.duty}", "");
        html = html.replace("%{item.price}", "");
        html = html.replace("%{item.hours}", "");
        html = html.replace("%{item.ffbz}", "");
        html = html.replace("%{item.ffyj}", "");
        let titleIndex = layui.$('.roleMoney').children().length;
        html = html.replaceAll("%{item.titleIndex}", titleIndex);
        if (!!$row) {
            html = html.replace("%{item.addShow}", "none");
            html = html.replace("%{item.delShow}", "block");
            $row.after(html);
        } else {
            html = html.replace("%{item.addShow}", "block");
            html = html.replace("%{item.delShow}", "none");
            $(".roleMoney").append(html);
        }

        xmSelect.render({
            el: '#sessionState' + titleIndex,
            name: 'title',
            data: xnUtil.getDictDataByDictTypeCode('professional_title', null),
            layVerify: 'required',
            layVerType: 'tips',
            radio: true,
            clickClose: true,
            model: {icon: 'hidden', label: {type: 'text'}},
            prop: {
                name: 'name',
                value: 'code'
            },
            tips: '请选择职称'
        }, {async: false});

    } else {
        var row = $(".role-row");
        for (var i = 0; i < row.length; i++) {
            var val = row.eq(i).find(".role>a").text();
            if (name === val) {
                row[i].remove();
            }
        }
    }
}


let role = [];
if (editData !== null && editData !== undefined) {
    form.val('addOrUpdateForm', editData);
    var row = JSON.parse(editData.roleAllowance);

    let repetition = unquire(row, 'account')

    allowance(repetition)

    function allowance(row) {
        for (var j = 0; j < row.length; j++) {
            role.push(row[j][0])
            for (var i = 0; i < row[j].length; i++) {
                var list = $("#tpl-list");
                var html = list.html();
                html = html.replace("%{item.id}", row[j][i].account);
                html = html.replace("%{item.name}", row[j][i].name);
                html = html.replace("%{item.title}", row[j][i].title);
                html = html.replace("%{item.duty}", row[j][i].duty);
                html = html.replace("%{item.code}", row[j][i].code || "");
                html = html.replace("%{item.price}", row[j][i].price);
                html = html.replace("%{item.hours}", row[j][i].hours);
                html = html.replace("%{item.ffbz}", row[j][i].ffbz);
                html = html.replace("%{item.ffyj}", row[j][i].ffyj);
                let titleIndex = layui.$('.roleMoney').children().length;
                html = html.replaceAll("%{item.titleIndex}", titleIndex);
                if (row[j][i] == row[j][0]) { //判断数组除第一项外都是删除
                    html = html.replace("%{item.addShow}", "block");
                    html = html.replace("%{item.delShow}", "none");
                } else {

                    html = html.replace("%{item.addShow}", "none");
                    html = html.replace("%{item.delShow}", "block");

                }

                $(".roleMoney").append(html);

                var titles = xmSelect.render({
                    el: '#sessionState' + titleIndex,
                    name: 'title',
                    data: xnUtil.getDictDataByDictTypeCode('professional_title', null),
                    layVerify: 'required',
                    layVerType: 'tips',
                    initValue: row[j][i].title ? [row[j][i].title] : [],
                    radio: true,
                    clickClose: true,
                    model: {icon: 'hidden', label: {type: 'text'}},
                    prop: {
                        name: 'name',
                        value: 'code'
                    },
                    tips: '请选择职称'
                }, {async: false});

            }
        }
    }

    roleAllowanceInc.setValue(role);
    parent.setValue([{"name": editData.pidName, "id": editData.pid}]);
    $("#type").val(editData.type);
    $("#name").val(editData.name);
    $("#remark").val(editData.remark);
    parent.setValue([{"pidName": editData.parentName, "pid": editData.parent}]);
    budgetDepartment.setValue(JSON.parse(editData.budgetDepartment));
    approver.setValue([{"name": editData.spName, "account": editData.spCode}]);
    layui.form.render();
//主要处理方式
    function unquire(arr, key) {//把相同的数组放到一起
        let concatArr = []
        arr.sort((a, b) => {
            var x = a[key].toLowerCase();
            var y = b[key].toLowerCase();
            if (x < y) return -1
            if (x > y) return 1;
            return 0;
        });  //排序
        for (let i = 0; i < arr.length; i++) {
            if (arr[0][key] === arr[arr.length - 1][key]) { //如果第一项等于最后一项 , 代表整个数组都相同
                concatArr.push(arr)
                break;
            } else if (arr[0][key] !== arr[i][key]) { //获取与第一项不同的元素的下标
                concatArr.push(arr.splice(0, i)) //将数组截取
                concatArr.push(...unquire(arr, key)) //截取后的数组进行递归 , 由于上一步用的为push , 所以返回的为复杂数组[[]] , 所以需要使用展开运算符进行扁平化
                break;
            }
        }
        return concatArr
    }


}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue动态添加表单删除表单非常简单,可以使用v-for指令和数组来实现。 首先,我们可以使用一个数组来存储表单的数据和状态。例如,定义一个data属性formData,其初始值为一个包含一个空对象的数组。 ``` data() { return { formData: [ {} ] } } ``` 接下来,在要添加表单的地方使用v-for指令循环渲染表单。我们可以使用一个按钮来触发添加新的表单项,每次点击按钮都会在formData数组中添加一个空对象,从而实现动态添加表单。 ``` <template> <div> <div v-for="(data, index) in formData" :key="index"> <!-- 表单内容 --> </div> <button @click="addForm">添加表单</button> </div> </template> methods: { addForm() { this.formData.push({}) } } ``` 然后,我们可以给每个表单添加删除功能。添加一个删除按钮,并使用v-on指令绑定方法。当点击删除按钮,通过splice方法从数组中移除对应的表单项,从而实现动态删除表单。 ``` <template> <div> <div v-for="(data, index) in formData" :key="index"> <!-- 表单内容 --> <button @click="deleteForm(index)">删除</button> </div> <button @click="addForm">添加表单</button> </div> </template> methods: { addForm() { this.formData.push({}) }, deleteForm(index) { this.formData.splice(index, 1) } } ``` 至于禁止和上传文件的功能,可以在表单项中添加对应的表单控件和属性来实现。比如,使用input元素的disabled属性来禁用某个输入框,使用input元素的type属性为"file"来实现文件上传功能。 同,你可以通过v-model指令绑定表单控件的值,从而实现表单数据的双向绑定。 总结一下,使用Vue动态添加删除表单非常方便。通过使用v-for指令和数组,配合相关的方法和表单控件属性,可以快速实现这样的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值