el-table 表格中数据必填校验

阿阿源。

已于 2024-08-22 09:57:23 修改

阅读量137

点赞数 1

分类专栏： elementui vue 文章标签： vue.js elementui javascript

于 2024-08-22 09:55:29 首次发布

本文链接：https://blog.csdn.net/m0_60370017/article/details/141419364

版权

elementui 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

例：
<el-table
                  :data="ruleForm.dataLists"
              style="width: 100%"
              row-key="id"
            >
              <el-table-column
                label="序号"
                type="index"
                width="50"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                show-overflow-tooltip
              />
              <el-table-column
                prop="sex"
                label="性别"
                show-overflow-tooltip
              />
              <el-table-column
                prop="age"
                label="年龄"
                show-overflow-tooltip
              />

              // 重点部分  --- 开始
              <el-table-column label="职业" prop="occupation">
                <template slot-scope="scope">
                  <el-form-item :prop="'dataLists.' + scope.$index + '.occupation'" :rules="{
                      required: true,
                      message: '不能为空',
                      trigger: 'change',
                  }">
                    <el-select
                      v-model="scope.row.occupation"
                      placeholder="请选择职业"
                      size="mini"
                      :disabled="disabled"
                    >
                      <el-option
                        v-for="(item, index) in occupationArr"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              // 重点部分  --- 结束

            </el-table>