vue table中input必填问题

Question

在这个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>

Answer 1

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

Answer 2

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

Answer 3

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