el-table中进行编辑，添加必填校验

最新推荐文章于 2024-05-17 14:32:46 发布

不想上班只想要钱

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量2.8k

点赞数

分类专栏： css 前端 html 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Aa12364567/article/details/128233833

版权

前端同时被 3 个专栏收录

145 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

el-table中进行编辑，添加必填校验

在这里插入图片描述

<el-form :model="seaList" ref="seaTableForm" :rules="seaList.rules" size="small" class="sea-form">
                <el-table :data="seaList.seaData" stripe style="width: 100%" height="330" size="mini">
                    <el-table-column type="index" label="序号" fixed align='center'>
                    </el-table-column>
                    <!-- <el-table-column label="海区" prop="seaName" align='center'>
                </el-table-column> -->

                    <el-table-column label="海区" align="center">
                        <template slot-scope="scope">
                            <el-form-item :prop="'seaData.' + scope.$index + '.seaAreaName'"
                                :rules="seaList.rules.seaAreaName">
                                <span v-if="(scope.row.isEdit)" class="red-sea">*</span>
                                <el-input size="mini" v-if="(scope.row.isEdit)" v-model.trim="scope.row.seaAreaName"
                                    clearable maxlength="30" placeholder="请输入海区" />
                                <span v-else v-text="scope.row.seaAreaName"></span>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column align='center' label="操作" fixed="right">
                        <template slot-scope="scope">
                            <!-- <el-button @click="handleSeaView(scope.row.id)" type="text" size="small">详情</el-button> -->
                            <el-button v-if="(scope.row.isEdit)" @click="handleSeaSave(scope.row)" type="text"
                                size="small">保存</el-button>
                            <el-button v-else @click="handleSeaEdit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button v-if="(scope.row.isEdit)" @click="handleSeaCancel(scope.row)"
                                style="color: gray;" type="text" size="small">取消</el-button>
                            <el-button v-else @click="handleSeaDel(scope.row.id)" style="color: red;" type="text"
                                size="small">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>

seaList: {
                id: '',
                visible: false,
                title: '',
                searchParams: {
                    seaName: ''
                },
                seaData: [],
                rules: {
                    seaAreaName: [
                        { required: true, message: '请输入海区', trigger: ['change', 'blur'] }
                    ]
                }
            },