V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ohohohh
V2EX  ›  Vue.js

vue antdV 求教一个功能:表单多选框勾选后才能输入文本框功能

  •  1
     
  •   ohohohh · 2021-05-12 15:28:49 +08:00 · 1425 次点击
    这是一个创建于 1289 天前的主题,其中的信息可能已经有所发展或是发生改变。

    功能如下: 例图 选项 1 到 8 文字从后台获取,当勾选了选项一后,才可以输入选项一后面的输入框,同时这个是个表单功能,请教保存什么样的格式到数据库方便数据回显???

    7 条回复    2021-05-13 16:13:47 +08:00
    JustLookBy
        1
    JustLookBy  
       2021-05-12 15:49:49 +08:00
    json,选项 n 作为 key,输入值做 value,没输入的就空字符串,前端直接判断是否空字符串回显
    ohohohh
        2
    ohohohh  
    OP
       2021-05-12 22:35:19 +08:00 via iPhone
    @JustLookBy 大佬能搞个 demo 吗?
    hm20062006ok
        3
    hm20062006ok  
       2021-05-13 09:49:55 +08:00
    <input id="opt1" type="checkbox" v-model="checked">
    <label for="opt1">选项 1</label>
    <input type="text" style="width: 50px;margin-left: 10px" :disabled="!checked">

    data () {
    return {
    checked:false,
    }
    },
    ohohohh
        4
    ohohohh  
    OP
       2021-05-13 10:13:18 +08:00
    <a-col v-for="(item, index) in otherTypeList" :key="index" :xs="20" :xl="5">
    <a-checkbox :value="item.id" style="margin-top: 5px">
    {{ item.key }}
    </a-checkbox>
    <a-input style="width: 50px" :max-length="3" size="small" />
    <span> 份</span>
    </a-col>
    效果如下:

    如果简单高效设置获取表单的值,并保存到后端
    ohohohh
        5
    ohohohh  
    OP
       2021-05-13 11:13:30 +08:00
    hm20062006ok
        6
    hm20062006ok  
       2021-05-13 15:27:45 +08:00
    <template>
    <a-form :form="form" class="form">
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
    <a-checkbox :checked="checkAll">
    Check all
    </a-checkbox>
    </div>
    <a-form-item label="其他成果">
    <a-row :gutter="12">

    <a-col
    v-for="(item, index) in otherData"
    :key="index"
    :xs="20"
    :xl="5"
    >
    <a-checkbox :value="item.id" style="margin-top: 5px" v-model="item.ischecked" @change="handleChange(item)">
    {{ item.value }}
    </a-checkbox>
    <a-input style="width: 50px" :max-length="3" size="small" :disabled="!item.ischecked" />
    <span> 份</span>
    </a-col>

    </a-row>
    </a-form-item>
    </a-form>
    </template>
    <script>
    export default {
    data() {
    return {
    checkAll: true,
    form: this.$form.createForm(this),
    otherData: [
    {
    id: 108,
    value: "方案册",
    ischecked: true
    },
    {
    id: 109,
    value: "模型",
    ischecked: false
    },
    {
    id: 110,
    value: "展板",
    },
    {
    id: 111,
    value: "案件数据表",
    ischecked: false
    },
    {
    id: 112,
    value: "结构计算书",
    ischecked: false
    },
    {
    id: 113,
    value: "建筑节能报告书",
    ischecked: false
    },
    {
    id: 114,
    value: "施工图审查意见回复",
    ischecked: false
    },
    {
    id: 115,
    value: "参考蓝图",
    ischecked: false
    },
    {
    id: 116,
    value: "参考白图",
    ischecked: false
    },
    {
    id: 117,
    value: "设计变更通知单",
    ischecked: false
    },
    {
    id: 118,
    value: "节能设计审查备案表",
    ischecked: false
    },
    {
    id: 119,
    value: "工程竣工验收备案资料",
    ischecked: false
    },
    {
    id: 120,
    value: "夏热冬暖节能设计审查表",
    ischecked: false
    },
    {
    id: 121,
    value: "装修审查表",
    ischecked: false
    },
    {
    id: 122,
    value: "光盘",
    ischecked: false
    },
    ],
    };
    },
    methods: {
    handleChange(item) {
    console.log(`selected ${item.ischecked}`);
    },
    },
    };
    </script>
    ohohohh
        7
    ohohohh  
    OP
       2021-05-13 16:13:47 +08:00
    谢谢各位大佬,已经解决了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   994 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:09 · PVG 04:09 · LAX 12:09 · JFK 15:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.