element teble嵌套表单

已于 2025-04-25 16:25:26 修改
阅读量829 收藏 10
点赞数 9
文章标签： vue.js javascript 前端
于 2024-02-28 10:55:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46352558/article/details/136340032
版权
本文详细描述了一个Vue项目中如何在表格中嵌套使用表单元素，包括el-form、el-table和el-select等，并展示了如何设置表单验证规则，如必填项和数字格式检查。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一种写法：

呈现效果
以下代码是组件代码 并不是上图的代码 ，只是大致功能是一样的，emm 主要是table列表里面嵌套form表单 并有添加校验， 其余功能代码是组件传参 或其他逻辑使用的未用到可不用

<template>
    <div>
        <el-form :rules="rules" ref="tableForm" :model='tableDataForm'>
            <el-table class="area-info" border :data="tableDataForm.tableData" style="width: 100%">
                <el-table-column fixed prop="targetType" label="指标类型" width="130" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.targetType'" :rules="rules.targetType">
                            <el-select v-model="scope.row.targetType" placeholder="请选择">
                                <el-option v-for="(v,i) in index_typeList" :key="i" :label="v.label" :value="v.value" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="targetName" label="指标名称" width="200" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.targetName'" :rules="rules.targetName">
                            <el-input v-model="scope.row.targetName"  show-word-limit maxlength="50"/>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="targetCode" label="指标编码" width="120">
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.targetCode'" :rules="rules.targetCode">
                            <el-input v-model="scope.row.targetCode" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="计量单位" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item>
                            <el-select v-model="scope.row.unit" placeholder="请选择">
                                <el-option v-for="(v,i) in measuring_unit" :key="i" :label="v.label" :value="v.value" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdUp" label="一级阈值上限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdUp'" :rules="rules.thresholdUp">
                            <el-input v-model="scope.row.thresholdUp" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdUp2" label="二级阈值上限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdUp2'" :rules="rules.thresholdUp2">
                            <el-input v-model="scope.row.thresholdUp2" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdDown" label="一级阈值下限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdDown'" :rules="rules.thresholdDown">
                            <el-input v-model="scope.row.thresholdDown" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="thresholdDown2" label="二级阈值下限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.thresholdDown2'" :rules="rules.thresholdDown2">
                            <el-input v-model="scope.row.thresholdDown2" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="rangeUp" label="量程上限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.rangeUp'" :rules="rules.rangeUp">
                            <el-input v-model="scope.row.rangeUp" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="rangeDown" label="量程下限" width="120" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item label=" " :prop="'tableData.' + scope.$index + '.rangeDown'" :rules="rules.rangeDown">
                            <el-input v-model="scope.row.rangeDown" />
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="parameterDesc" label="指标描述" width="160" show-overflow-tooltip>
                    <template #default="scope">
                        <el-form-item>
                            <el-input v-model="scope.row.parameterDesc"  show-word-limit maxlength="100"/>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" prop="useArea" label="操作" width="70">
                    <template #default="scope">
                        <div>
                            <a @click="handleDel(scope.row,scope.$index)" class="operation delete">删除</a>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>

<script setup>
    import { onBeforeMount, reactive, ref, getCurrentInstance, watch, nextTick, onMounted } from "vue";
    import { useRouter } from 'vue-router';
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const validation = proxy.validation;
    const props = defineProps({
        listData: [],
    });
    const tableDataForm = reactive({
        tableData: [],
    })
    const measuring_unit = ref([])
    const index_typeList=ref([])
    const rules = {
        targetType: [{ required: true, message: '请选择', trigger: ['blur', 'change'], }, ],
        targetName: [{ required: true, message: '请输入', trigger: ['blur', 'change'], },
            { validator: validation, check: ['empty', 'blank'] }
        ],
        targetCode: [{ required: true, message: '请输入', trigger: ['blur', 'change'], },
            { validator: validation, check: ['empty', 'blank'] }
        ],
        thresholdUp:[{ validator: validation, check: [ 'number-decimals'] }],
        thresholdUp2:[{ validator: validation, check: [ 'number-decimals'] }],
        thresholdDown:[{ validator: validation, check: [ 'number-decimals'] }],
        thresholdDown2:[{ validator: validation, check: [ 'number-decimals'] }],
        rangeUp:[{ validator: validation, check: [ 'number-decimals'] }],
        rangeDown:[{ validator: validation, check: [ 'number-decimals'] }],

    }

    watch(()=>props.listData,(n,o)=> {
        if(n && n.length && n.length!=0){
           tableDataForm.tableData=JSON.parse(JSON.stringify(n)) 
       
        }
    } ,{ immediate: true })
    const handleDel = (item, index) => {
        tableDataForm.tableData.splice(index, 1)
    }
    onMounted(()=>{
        getdictionariesList();
    })
    defineExpose({
        addList,
        saveForm
    });
    
    async function getdictionariesList() {
        await proxy.api.apiSelectDictMap({ key: 'index_type,measuring_unit' }).then((res) => {
            if (res.success) {
                index_typeList.value = res.data.index_type;
                measuring_unit.value=res.data.measuring_unit;
            }
        })
    }
    function addList() {
        tableDataForm.tableData.push({})
    }

    function saveForm() {
        proxy.$refs.tableForm.validate((valid, fields) => {
            if (valid) {
                // 业务逻辑操作代码...
                proxy.$emit('completed', tableDataForm.tableData, )
            }
        })
    }
</script>
<style  lang="less"  scoped>
:deep(.el-form-item__label){
    padding: 0 !important; 
}
:deep(.el-form-item){
    display: inline-flex !important;
}
</style>

第二种写法

效果图 在这里插入图片描述

<template>
    <div class="page-container">
        <div class="page-layer">
            <div class="common-page page-table">
                <h3 class="section-title"><i></i>帮教流程</h3>
                <section class="common-list-operate">
                    <section class="query">
                        <el-form :inline="true" :label-width="0">
                            <el-form-item label="帮教流程:">
                                <el-input v-model="state.queryParams.userRoleId" clearable style="width: 200px;" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="适用等级:">
                                <el-select v-model="state.queryParams.select" clearable style="width: 200px;" placeholder="请选择">
                                    <el-option v-for="item in state.tempOptions" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="buttons">
                            <el-button class="reset" type="primary" icon="Search" @click="handleFilterSubmit()">搜索</el-button>
                            <el-button class="reset" type="default" icon="RefreshLeft" @click="handleFilterReset()"></el-button>
                        </div>
                    </section>
                    <div class="buttons">
                        <el-button class="reset" type="primary" @click="handleAdd()">新增</el-button>
                    </div>
                </section>
               <!-- table-outer 有搜索框时，需手动修正搜索框高度（单行搜索框为70px高度） -->
                <section class="table-outer" style="height: calc(100% - 70px);">
                    <div class="table-contain">
                        <el-table ref="dataTable" :data="state.tableData.list" border height="calc(100% - 45px)" >
                            <el-table-column prop="index" label="序号" width="60" align="center">
                                <template #default="scope">
                                    <span>{{ pageSort(state.queryParams.pagination.page,state.queryParams.pagination.size,scope.$index)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="lcmc" label="流程名称" width="200"></el-table-column>
                            <el-table-column prop="sydj" label="适用等级" ></el-table-column>
                            <el-table-column prop="gxr" label="更新人"></el-table-column>
                            <el-table-column prop="newTime" label="更新时间"></el-table-column>
                            <el-table-column label="操作" width="200" align="center">
                                <template #default="scope">
                                    <a @click="handleDetail(scope.row)" class="operation detail">详情</a>
                                    <a @click="handleEdit(scope.row)" class="operation detail">编辑</a>
                                    <a @click="handleDel(scope.row)" class="operation delete">删除</a>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination v-if="state.tableData.pagination.total>state.tableData.pagination.size" @change="handlePageChange" :default-page-size="10" :page-sizes="[10, 15, 30, 40, 50, 100]" layout="sizes, total, prev, pager, next" :total="state.tableData.pagination.total" />
                            <span v-else class="no-more">已无更多信息</span>
                        </div>
                    </div>
                </section>
            </div>
            <div class="bottom-box">
                <div class="content">
                    <h3 class="section-title"><i></i>分管领导确认配置</h3>
                    <el-form :inline="true" :model="state.formInline" class="demo-form-inline myFlexstyle">
                        <el-form-item label="分管领导确认流程启用">
                            <el-switch
                                v-model="state.formInline.value2"
                                class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            />
                        </el-form-item>
                        <el-form-item label="违章等级">
                            <el-select  style="width: 200px;" v-model="state.formInline.wzdj"  placeholder="请选择">
                                <el-option v-for="item in state.levelList" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="content">
                    <h3 class="section-title"><i></i>回访配置</h3>
                    <el-form :inline="true" :model="state.formInline"   class="demo-form-inline myFlexstyle">
                        <el-form-item label="回访流程启用">
                            <el-switch
                                v-model="state.formInline.value1"
                                class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            />
                        </el-form-item>
                        <el-form-item label="回访期限(天)">
                            <el-input-number style="width: 200px;"  v-model="state.formInline.num" :min="1" :max="1000"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <el-dialog class="common-dialog" :title="state.dialogs.form.type=='add' ? '新增' : state.dialogs.form.type=='edit' ? '编辑' : '查看详情'" v-model="state.dialogs.form.visible" width="900px" append-to-body align-center destroy-on-close>
            <div class="outer-detail" v-if="state.dialogs.form.type=='detail'">
                <section class="detail-group">
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item label="设备状态" >
                            <el-tag style="width: 80px;" :type="state.dialogs.form.data.status==1?'success':''">{{(state.dialogs.form.data.status==1?'在线':'离线' )}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="所在区域" >
                            {{state.dialogs.form.data.area}}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备名称" >
                            {{state.dialogs.form.data.deviceName}}
                        </el-descriptions-item>
                        <el-descriptions-item label="通道号" >
                            {{state.dialogs.form.data.num}}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备编号" >
                            {{state.dialogs.form.data.deviceCode}}
                        </el-descriptions-item>
                        <el-descriptions-item label="视频流地址" >
                            {{state.dialogs.form.data.flvUrl}}
                        </el-descriptions-item>
                       
                        <el-descriptions-item label="已关联模型" >
                            {{state.dialogs.form.data.setModel}}
                        </el-descriptions-item>
                    </el-descriptions>
                </section>
                <section class="float-buttons" style="bottom:15px;margin:15px 0;">
                    <el-button @click="handledetailDown()">返回</el-button>
                </section>
            </div>
            <div class="form-group" v-else>
                <div class="commom-form">
                    <el-form ref="FormDataref" :model="state.dialogs.form.data" label-width="70px" label-position="left">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <h3 class="section-title"> <i></i>帮教信息</h3>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item prop="lcxx" label="流程信息"  class="is-required" :rules="state.dialogs.form.rules.lcxx">
                                            <el-input    v-model="state.dialogs.form.data.lcxx" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="sydj" label="适用等级"  class="is-required" :rules="state.dialogs.form.rules.sydj">
                                            <el-select  v-model="state.dialogs.form.data.sydj" class="m-2" placeholder="请选择">
                                                <el-option v-for="item in state.levelList" :key="item.value" :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <h3 class="section-title" > <i></i>帮教流程</h3>
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                        <div class="section">
                                            <div class="section-step" v-for="(v,i) in state.dialogs.form.data.sectionList" :key="i">
                                                <div class="section-step-top">
                                                    <div class="step-icon"  @click="handleCheckSection(v)" :class="state.currentSection.ind==v.ind ? 'current':''"><span class="white"></span> <i class="white-line"></i> 
                                                        <i @click="handleDelSection(v,i)" class=" del-line"></i>
                                                    </div>
                                                    <i class="line"></i>
                                                </div>
                                                <p class="section-step-name">{{v.jdmc}}</p>
                                            </div>
                                            <div class="section-step-add" @click="handleAddSecitio()">  
                                                <el-icon><Plus /></el-icon>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-for="(v,i) in state.dialogs.form.data.sectionList" :key="v.ind" v-show="state.currentSection.ind==v.ind">                  
                                    <el-col :span="12">
                                        <el-form-item :prop="'sectionList.' + i + '.xh'" label="序号"  class="is-required" :rules="state.dialogs.form.rules.xh">
                                            <el-input    v-model="state.dialogs.form.data.sectionList[i].xh" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :prop="'sectionList.' + i + '.jdmc'" label="节点名称"  class="is-required" :rules="state.dialogs.form.rules.jdmc">
                                            <el-input    v-model="state.dialogs.form.data.sectionList[i].jdmc" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :prop="'sectionList.' + i + '.zrr'" label="责任人"  class="is-required" :rules="state.dialogs.form.rules.zrr">
                                            <el-input    v-model="state.dialogs.form.data.sectionList[i].zrr" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item   :prop="'sectionList.' + i + '.zrbm'" label="责任部门"  class="is-required" :rules="state.dialogs.form.rules.zrbm">
                                            <el-select  v-model="state.dialogs.form.data.sectionList[i].zrbm" class="m-2" placeholder="请选择">
                                                <el-option v-for="item in state.levelList" :key="item.value" :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :prop="'sectionList.' + i + '.bjdd'" label="帮教地点"  class="is-required" :rules="state.dialogs.form.rules.bjdd">
                                            <el-input    v-model="state.dialogs.form.data.sectionList[i].bjdd" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :prop="'sectionList.' + i + '.bjnr'" label="帮教内容"  class="is-required" :rules="state.dialogs.form.rules.bjnr">
                                            <el-input    v-model="state.dialogs.form.data.sectionList[i].bjnr" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <!-- <el-row :gutter="20">
                                    <el-col :span="24">
                                        <div class="section">
                                            <div class="section-step" v-for="(v,i) in state.sectionList" :key="i">
                                                <div class="section-step-top">
                                                    <div class="step-icon"  @click="handleCheckSection(v)" :class="state.currentSection.ind==v.ind ? 'current':''"><span class="white"></span> <i class="white-line"></i> 
                                                        <i @click="handleDelSection(v,i)" class=" del-line"></i>
                                                    </div>
                                                    <i class="line"></i>
                                                </div>
                                                <p class="section-step-name">{{v.name}}</p>
                                            </div>
                                            <div class="section-step-add" @click="handleAddSecitio()">
                                                <el-icon><Plus /></el-icon>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" v-if="state.sectionList.length!=0">
                                    <el-col :span="12">
                                        <el-form-item prop="xh" label="序号"  class="is-required" :rules="state.dialogs.form.rules.xh">
                                            <el-input    v-model="state.currentSection.xh" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="jdmc" label="节点名称"  class="is-required" :rules="state.dialogs.form.rules.jdmc">
                                            <el-input    v-model="state.currentSection.jdmc" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="zrr" label="责任人"  class="is-required" :rules="state.dialogs.form.rules.zrr">
                                            <el-input    v-model="state.currentSection.zrr" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="zrbm" label="责任部门"  class="is-required" :rules="state.dialogs.form.rules.zrbm">
                                            <el-select  v-model="state.currentSection.zrbm" class="m-2" placeholder="请选择">
                                                <el-option v-for="item in state.levelList" :key="item.value" :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="bjdd" label="帮教地点"  class="is-required" :rules="state.dialogs.form.rules.bjdd">
                                            <el-input    v-model="state.currentSection.bjdd" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item prop="bjnr" label="帮教内容"  class="is-required" :rules="state.dialogs.form.rules.bjnr">
                                            <el-input    v-model="state.currentSection.bjnr" placeholder="请输入" maxlength="200" show-word-limit></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row> -->
                            </el-col>
                        </el-row>

                    </el-form>
                    <section class="float-buttons" style="bottom:15px">
                        <el-button @click="handleFormSubmit()" type="primary">保存</el-button>
                        <el-button @click="handleFormReset()">返回</el-button>
                    </section>
                </div>
            </div>
        </el-dialog>

    </div>
</template>
<script setup>
    import { ref, reactive, computed, getCurrentInstance, nextTick, watch, onBeforeMount, onMounted } from 'vue';
    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router';
    const { proxy } = getCurrentInstance();
    const store = useStore()

    const state = reactive({
        currentSection:{},
        sectionList:[],
        formInline:{},
        queryParams:{                                       //列表请求参数(符合前端开发规范2024年第一版)
            query:{
                userRoleId:null,
                roleId:null,
                status:0,
            },
            sort: {
                prop: 'createdAt',                         //String 排序项名称 例:1)'createdAt' : 创建时间、发布时间 2)'updatedAt' : 更新时间、编辑时间 3)其它自定义排序关键字
                order: 'descending',                        //String 排序方式 'ascending 升序'/'descending 降序'
            },
            pagination:{
                page:1,                                     //Number 请求页码
                size:10                                     //Number 每页条数
            }
        },
        tableData:{                                         //列表返回参数(符合前端开发规范2024年第一版)
            success:true,                                   //Boolean 查询结果 true/false
            message:'ok',                                   //String 查询结果描述信息，若查询成功则返回'ok'，否则返回错误描述（供前端弹出提示）
            code:'200',                                     //所有正常请求code为200，登录超时、强制下线、无权限等状态由后端定义
            list:[],                                        //Array  列表数据
            pagination:{
                total:100,                                  //Number 总数
                page:1,                                     //Number 请求页码
                size:10,                                    //Number 每页条数
            }
        },
        wayList:[
            {label:'罚款',value:1},
            {label:'帮教',value:2},
            {label:'辞退',value:3},
        ],
        selectRows:[],                                      //已选列表项
        filterCount:0,                                      //使用中的筛选项（用于将筛选数回显到重置按钮上）
        tempOptions:proxy.variable.testSelectOptions,
        dialogs: { //页面弹窗配置
            form: {
                visible: false, //弹窗可见状态
                type: 'add', //弹窗类型 add添加/edit编辑/detail详情
                data: { //弹窗数据(详情,表单通用)
                    value1: 2, //使用radio单选组件的变量应赋予初始值
                    value2: 2,
                    way:[],
                },
                rules: { //弹窗校验模型 更多验证方法参见 /service/utils/validation.js
                    'lcxx': [{ validator: proxy.validation, check: ['empty', 'blank'], lable: '流程信息' }],
                    'sydj': [{ validator: proxy.validation, check: ['empty', 'blank'], lable: '适用等级' }],
                    'xh':[{ validator: proxy.validation, check: ['empty', 'blank'], lable: '序号' }],
                    // 'jdmc':[{ validator: proxy.validation, check: ['empty', 'blank'], lable: '节点名称' }],
                    jdmc:[
                        { validator: proxy.validation, check: ['empty', 'blank'], lable: '节点名称' }
                    ],
                    'zrr': [{ validator: proxy.validation, check: ['empty', 'blank'], lable: '责任人' }],
                    'zrbm': [{ validator: proxy.validation, check: ['empty', 'blank'], lable: '责任部门' }],
                    'bjdd': [{ validator: proxy.validation, check: ['empty', 'blank'], lable: '帮教地点' }],
                    'bjnr': [{ validator: proxy.validation, check: ['empty', 'blank'], lable: '帮教内容' }],
                },
            },
            map:{
                visible:false,
            },
        },
        mapData:{
            step1:{
                location:[],
            }
        },
    })

    watch(() => state.queryParams, (n, o) => {
        let i = 0;
        for (let k in n.value) {
            if (k && k != 'page' && k != 'pageSize' && n.value[k]) i++
        }
        state.filterCount = i;
    }, { deep: true }, { immediate: true })

    //页面生命周期：挂载前
    onBeforeMount(() => {
        handleFilterSubmit()
    })

    //筛选器：重置
    function handleFilterReset() {
        state.queryParams = {
            query:{
                userRoleId:null,
                roleId:null,
                status:0,
            },
            sort: {
                prop: 'createdAt',
                order: 'descending',
            },
            pagination:{
                page:1,
                size:state.queryParams.pagination.size || 10
            }
        }
        getListData()
    }
    

    //筛选器：提交
    function handleFilterSubmit() {
        getListData()
    }
    //获取列表数据
    function getListData() {
        setTimeout(()=>{
            let arr = [];
            for (let i = 0; i < state.queryParams.pagination.size; i++) {
                let status = ['', 'success', 'info', 'warning', 'danger'][proxy.makeRandom(0, 4)]
                arr.push({
                    index: i+1,
                    lcmc:'xxxxxxxx',
                    sydj:'一般',
                    gxr:'张小明',
                    newTime:'2025-04-08 23:29:51',
                })
            }
            state.tableData = {
                success:true,                                   //Boolean 查询结果 true/false
                message:'ok',                                   //String 查询结果描述信息，若查询成功则返回'ok'，否则返回错误描述（供前端弹出提示）
                code:'200',                                     //所有正常请求code为200，登录超时、强制下线、无权限等状态由后端定义
                list:arr,                                       //Array  列表数据
                pagination:{
                    total:100,                                  //Number 总数
                    page:1,                                     //Number 请求页码
                    size:10,                                    //Number 每页条数
                }
            }
        },500)
    }

    //多选
    function handleSelectionChange(arr) {
        state.selectRows = arr;
    }

    //表格页码或每页显示数量切换
    function handlePageChange(page,size){
        state.queryParams.pagination = {page,size}
        getListData();
    }
    function handleAdd() {
        state.dialogs.form.type = 'add';
        state.dialogs.form.visible = true;
        state.dialogs.form.data = {
            sectionList:[],
            way:[],
        };
        state.sectionList=[];
        state.currentSection={};
    }
    function handleFormSubmit() {
        console.log(state.dialogs.form.data)
         proxy.$refs.FormDataref.validate((valid, fields) => {
            if (valid) {
                let params=JSON.parse(JSON.stringify(state.dialogs.form.data))
                if(state.dialogs.form.type == 'add'){
                    // proxy.api.apitestEquipmentsave(params).then((res)=>{
                    //     if(res.success){
                            proxy.openNotify('success', '操作成功', `操作保存成功`);
                            state.dialogs.form.visible = false;
                            state.dialogs.form.data = {};
                            getListData()
                    //     }
                    // })
                }else{
                    // proxy.api.apitestEquipmentupdate(params).then((res)=>{
                    //     if(res.success){
                            proxy.openNotify('success', '操作成功', `操作保存成功`);
                            state.dialogs.form.visible = false;
                            state.dialogs.form.data = {};
                            getListData()
                    //     }
                    // })
                }
            } else {
                //   alert(11)
            }
        })
    }
    function handleFormReset() {
        state.dialogs.form.visible = false;
        state.dialogs.form.data = {
            way:[],
        };
    }

    async function handleEdit(val) {
        state.dialogs.form.data= await getRowInfo(val);
        state.dialogs.form.type = 'edit';
        state.dialogs.form.visible = true;
    }
    async function handleDetail(val) {
        state.dialogs.form.data= await getRowInfo(val);
        state.dialogs.form.type='detail';
        state.dialogs.form.visible=true;
    }
    async function getRowInfo(val){
        let returnData={};
        // await proxy.api.apitestEquipmentqueryById({id:val.id}).then((res)=>{
        //     if(res.success){
        //         returnData=res.data;
        //     }
        // })
        returnData=val;
        return returnData
    }


    function handledetailDown() {
        state.dialogs.form.type='detail';
        state.dialogs.form.visible=false;
        state.dialogs.form.data={};
    }

    function handleDel(row) {
        proxy.$confirm('', {
            dangerouslyUseHTMLString: true,
            customClass: 'flash',
            message: `<h2>操作确认</h2><span>该操作不可逆，是否确认删除？</span>`,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showClose: false,
            type: 'warning',
        }).then(() => {
            // proxy.api.apitestEquipmentdelete({ ids: row.id }).then((res) => {
            //     if (res.success) {
                    proxy.openNotify('success', '操作成功', `操作成功`);
                    getListData()
            //     }
            // })
        }).catch(() => {});
    }

    // 新增节点
    function handleAddSecitio(){
        state.dialogs.form.data.sectionList.push(
            {
                ind:state.dialogs.form.data.sectionList.length+1,
                xh:'',
                jdmc:'',
                zrn:'',
                zrbm:'',
                bjdd:'',
                bjnr:'',
            }
        )
        if(state.dialogs.form.data.sectionList.length==1){
            state.currentSection=state.dialogs.form.data.sectionList[0];
        }
       
    }
    //  选中节点
    function handleCheckSection(val){
        state.currentSection= JSON.parse(JSON.stringify(val));
    }
    // 删除节点
    function handleDelSection(val,index){
        // 保存当前选中项的 ind
        const currentInd = state.currentSection?.ind;
        // 删除指定项
        state.dialogs.form.data.sectionList.splice(index, 1);

        // 检查当前选中的项是否已被删除
        const isCurrentDeleted = !state.dialogs.form.data.sectionList.some(
            item => item.ind === currentInd
        );
        console.log(isCurrentDeleted)
        if (isCurrentDeleted) {
          
            if (state.dialogs.form.data.sectionList.length > 0) {
                // 选中数组第一个元素
                state.currentSection = JSON.parse(JSON.stringify( state.dialogs.form.data.sectionList[0])) ;
            } else {
                // 数组为空时清空选中
                state.currentSection = {};
            }
        }else{
        console.log(state.currentSection)
           
        }
    }
    function onSubmit(){

    }
</script>
<style lang='less' scoped>
:deep(.common-page){  height: 600px !important;border:  1px solid #E8ECF4; padding: 13px; margin-bottom: 10px;}
.section-title{ margin-bottom: 16px;
    i{ display: inline-block; width: 3px; height: 14px;  background: #2A71EF; margin-right: 5px;}
}
.myFlexstyle{ display:  flex; }
.bottom-box{ display: flex; justify-content: space-between;
     .content{ border:  1px solid #E8ECF4; width: 49.7%; padding:13px ;}
}
.section{display: flex; width:100%;  .scrollbar(); 
    .section-step{ 
        .section-step-top{ display: flex; align-items: center;
            .step-icon{width: 32px ;height: 32px; border-radius: 50%;  background:#6D8AE4 ; position: relative; display: flex; align-items: center;  justify-content:center; cursor: pointer;
                .white{ width: 10px;height: 10px; position: absolute;  background: #fff; z-index: 5;border-radius: 50%; }
                .white-line{ width: 20px;height: 2px; position: absolute;  background: #fff; z-index: 10;}
                .del-line{  width: 14px; height:14px ;border-radius: 50%; background: #DC6E6E ; position: absolute; right: -5px;top: 0px; display: none;   cursor: pointer;} 
                .del-line::before{ content: ""; width: 8px; height: 2px; background: #fff;position: absolute; top: 6px; right: 3px; }
                &:hover{
                    .del-line{display: inline-block;}
                }
            }
            .current{ background:#6DCA60  ;}
            .line{display: inline-block;  width:80px; height: 3px; background: #DEE2EA; }
            
        }
        .section-step-name{font-size: 12px;height: 20px;} 
    }
    .section-step-add{ width: 32px ;height: 32px;border-radius: 50%;background: #EBF0FC;border: 1px solid #789EEB; display: flex; justify-content: center;align-items: center; cursor: pointer;
        .el-icon{ font-size: 20px; color:#789EEB  ;}
    }
}

</style>
诺小D
关注
element table表格嵌套
weixin_45907780的博客
11-23 2190
element el-table嵌套el-table
vue element-ui 多层嵌套表单循环验证
weixin_47503277的博客
07-30 1437
vue
Element实现表格嵌套、多个表格共用一个表头的方法
11-21
一、分析需求 这里先上一张图说明 需求 ： 根据后端返回的数据 （ res 是一个数组，它的元素是一个对象，对象里面的 ext 属性是一个对象，它又包含了， default 、 free 和 pay 三个属性，且这三个都是数组格式。）：   渲染出一个这样子的 表格 ： res 数据： res 的每一个元素的直接属性 name （即为邮费模板名称，比如成都运费模板）， res 的 ext 属性下的三个数组 default 、 free 、 pay ，每一个数组要大的一行（这一行中，第一列是运送到的地址的名字，这里定义的是 area 属性，但后端是未给到这个字段的，可自己处理数据添加该字段
ElementUI用el-table实现表格内嵌套表格
热门推荐
香菜的博客
11-20 1万+
el-table 实现表格内嵌套表格（宇宙无敌详细！！！一看就会！）
【Element】el-form和el-table嵌套实现表格编辑并提交表单校验
coldriversnow的专栏
03-20 919
用户只对模块设置区的排序或多选框进行了操作，没有对自定义设置区进行操作就保存，因对自定义设置区的表单进行了校验，此时无法提交，需更改现有代码；自定义设置区默认要有一条空数据在页面展示，可供用户自定义操作，不管用户是否填写，保存时都能正常保存，如果用户填写了表单但不完整，此时需对表单进行校验通过再保存成功。表格增加操作项，具有添加和删除按钮，第一项无法删除，点击添加时，动态增加表格的行数，点击删除的时候，删除表格的行数据。背景：页面中包含2个功能设置区，当用户进行操作后，统一进行保存，如下👇。
使用element 实现一个嵌套表格
Rebirth_lemon的博客
05-10 661
在外层的table使用tableData的数据，设置第一列的表头，第二列之后的表头通过便利tableHead获取，在第二个el-table-column里边嵌套一个table，此时的scope.row就是tableData数组中的对象，使用嵌套表格，首先创建两个数组 tableHead 和 tableData 存储表头数据和表格数据，但是呢 没有数据的地方不能显示空白，要显示表格 讨论了一下得出来一个解决方案。今天和之前的同事聊天，说他们公司提了一个需求，类似于这样。第一次发 （下手轻点）
element-ui实现table表格的嵌套（table表格嵌套）功能实现
yehaocheng520的博客
12-12 2162
element-ui实现table表格的嵌套（table表格嵌套）功能实现
vue+elementUI实现表格嵌套
wangzhe123_的博客
09-05 8433
vue+elementUI实现表格嵌套功能
element中表格中嵌套表单设置必选项
lazycode_lzd的博客
05-16 302
这里要注意一下，我们知道element中表单是要绑定一个对象，表格为一个数组对象，所以我们要把表格的数组对象放进表单绑定的对象中，然后prop绑定的时候需要把表格的数组名字加上他的索引和字段名，这样就完成了。最近做项目的时候遇到了组件中表格嵌套表单的问题，然后最关键的就是如何绑定prop，下面废话不多说，直接上代码。其次就是设置prop。
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
element表单嵌套表格，多层嵌套校验
weixin_45195407的博客
07-26 416
【代码】element表单嵌套表格，多层嵌套校验。
表格表单的嵌套.html
09-18
比较简单的表单与表格的嵌套，只是做一个引导作用，实际意义不大，
表格行嵌套子表格实现
03-26
Flex AdvanceDataGrid 表格行嵌套子表格实现，实现子表格显示数据功能，暂时原理实现的不完善，有需要的或者高手能帮忙细化下最好了。
vue elementUI 表单嵌套验证的实例代码
12-30
一：表单一级验证 element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证 <el ref=form model=form rules=rules label-width=110px> <el label=客户名称: size=small prop=belongId> <el v-show=false v-model=form.belongId></el> <ComSelectorCustom
编写嵌套表单
qwbtc的博客
07-28 523
很多程序已经复杂到在一个表单中编辑一个对象已经无法满足需求了。例如，创建 Person 对象时还想让用户在同一个表单中创建多个地址（家庭地址，工作地址，等等）。以后编辑这个 Person 时，还想让用户根据需要添加、删除或修改地址。 9.1 设置模型 Active Record 为此种需求在模型中提供了支持，通过 accepts_nested_attributes_for 方法实现：
Element嵌套表格如何写
weixin_45369963的博客
06-22 607
<template> <div class="container"> <el-card class="box-card"> <!-- 表单 --> <div class="formbox"> <el-row :gutter="20"> <el-col :span="22"> <el-form :inline="true" .
elementui表格嵌套表单
weixin_43937400的博客
10-21 5192
表格嵌套表单并触发校验的案例
表单表格嵌套布局
最新发布
2501_90771362的博客
03-27 1047
重生之如何用HTML做一个满满少女心的表单表格..
element-plus table 嵌套 select
03-26
以下是一个完整的示例代码片段，展示如何在 `element-plus` 的表单中嵌套下拉选择框组件： ```html <!-- 表格区域 --> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值