首页 新闻 搜索 专区 学院

vue table中input必填问题

0
悬赏园豆:200 [已解决问题] 解决于 2020-06-13 10:57

在这个table中所有属性可以非必填,但是填了一个属性年份就为必填,请问各位大佬怎么写.

<table class="projectTable" :class="{'disable': disable}">
      <tr>
        <td class="label">年份</td>
        <td class="label">投入(万元)</td>
        <td class="label">销售(万元)</td>
        <td class="label">税收(万元)</td>
        <td class="label">净利润(万元)</td>
        <td class="label">备注</td>
      </tr>
      <tr v-for="(item, index) in projectInfo.inputSalesTaxSOList" :key="index">
        <td>
          <el-date-picker
            type="year"
            value-format="yyyy"
            v-model="item.projectYear"
            :disabled="disable"
          />
        </td>
        <td><input type="text" :disabled="disable" v-model="item.investAmount"></td>
        <td><input type="text" :disabled="disable" v-model="item.salesAmount"></td>
        <td><input type="text" :disabled="disable" v-model="item.tax"></td>
        <td><input type="text" :disabled="disable" v-model="item.netProfit"></td>
        <!-- <td><input type="text" v-model="item.remarks"></td> -->
        <td><el-input
          type="textarea"
          autosize
          v-model="item.remarks"
          maxlength="50"
          :disabled="disable"
          show-word-limit /></td>
      </tr>
    </table>
一江潮的主页 一江潮 | 初学一级 | 园豆:14
提问于:2020-06-08 09:42
< >
分享
最佳答案
0

你用v-model绑定的item对象,就可以使用item的各个属性内容是否为空来作为年份输入框是否必填的条件。你需要考虑的是如何展示必填提示,首先看用的组件有没有直接提供,没有就要自己写了,可以在input框上添加样式(依据item各属性是否为空来切换样式显示),可以在保存操作的方法中弹窗提示。

收获园豆:100
授之以渔 | 小虾三级 |园豆:1076 | 2020-06-08 11:50
其他回答(2)
0

看你业务逻辑情况吧,你要是这边表单需要提交你就在最后提交的时候加个js进行判断字段是否为空给予对于的message,如果是在用户点了input框后后续进行判断你再进行js进行判断,管他vue还是什么,最终前端也就是html,css,js这3个,你根据你业务逻辑自己设置

收获园豆:100
小小咸鱼YwY | 园豆:1548 (小虾三级) | 2020-06-08 10:03
0

JS控制?做一个check 焦点移除事件,除了 年份 那一项不做;
焦点事件:
给每一项[除年份]都做判断:判断年份那一项是否有值,若有值,则当前项必须有值,反之可以为空。

南小鸟 | 园豆:181 (初学一级) | 2020-06-12 11:22
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册