在这个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>
你用v-model绑定的item对象,就可以使用item的各个属性内容是否为空来作为年份输入框是否必填的条件。你需要考虑的是如何展示必填提示,首先看用的组件有没有直接提供,没有就要自己写了,可以在input框上添加样式(依据item各属性是否为空来切换样式显示),可以在保存操作的方法中弹窗提示。
看你业务逻辑情况吧,你要是这边表单需要提交你就在最后提交的时候加个js进行判断字段是否为空给予对于的message,如果是在用户点了input框后后续进行判断你再进行js进行判断,管他vue还是什么,最终前端也就是html,css,js这3个,你根据你业务逻辑自己设置
JS控制?做一个check 焦点移除事件,除了 年份 那一项不做;
焦点事件:
给每一项[除年份]都做判断:判断年份那一项是否有值,若有值,则当前项必须有值,反之可以为空。