本文详细描述了如何在Vue应用中使用el-table展示子表数据，每个单元格支持编辑，包括弹框添加新数据、表头筛选、数量校验等功能，以及添加和删除按钮的控制。
目录
需求
1、新增数据时跳出弹框，弹框主子表显示
2、主表用form表单显示
3、子表用el-table显示，并且每个单元格都可编辑
4、子表applyQty有校验，applyQty>planQty触发验证消息，在修改每一行的数量的时候给出提示
最终实现样子
拆解需求 + 具体实现
1、form表单部分
这部分比较好实现，不过多赘述
<el-form :inline="true" class="demo-form-inline" label-position="right" label-width="130px" label-suffix=":" :rules="rules" ref="editForm" :model="editlist">
<el-row>
<el-col :span="12">
<el-form-item label="项目名称" prop="bidName">
<el-input v-model="editlist.bidName" placeholder="项目名称" clearable style="width: 200px"> </el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型" prop="outTypeReal">
<-- DictSelect是自己封装的下拉框的组件，不重要 -->
<DictSelect :dictType="'type_choose'" :value="editlist.outTypeReal" :isMultiple="false" placeholder="类型" style="width: 200px" @change="typeChange" :isClearable="true"> </DictSelect>
</el-form-item>
</el-col>
</el-row>
</el-form>
2、el-table表格部分
2.1表头渲染
<template v-for="item in tableHeadConfig.headers">
<template v-if="item.hvisible">
</template>
</template>
这里循环渲染表头，并且可以在接口返回的数据里配置列是否显示
2.2 表头筛选插槽
<template #header v-if="showFilterRow">
<headerParam :header="item" :ref="item.colid + '_param'" @children-change="paramChange" @children-enter="paramEnter" :showEmptyItem="showEmptyItem"> </headerParam>
</template>
2.3 单元格不同input输入插槽
<template #default="scope">
<div class="input-box">
<el-input size="small" v-model="scope.row[item.colid]"></el-input>
</div>
</template>
2.4 单元格特殊输入
<-- 用v-if控制哪一列需要单独处理 -->
<-- 下面例：选择时间 -->
<el-date-picker v-model="scope.row[item.colid]" type="date" size="mini" v-if="item.colid === 'reqTime'" style="width: 120px"> </el-date-picker>
2.5 el-table部分完整代码
<el-table
ref="dataTable"
:data="tableData"
border
style="width: 100%; height: 450px"
size="mini"
highlight-current-row
@header-dragend="widthChanged"
element-loading-background="rgba(0, 0, 0, 0.5)"
element-loading-text="正在加载中"
@current-change="rowSelect"
@sort-change="sortChange"
:row-class-name="rowClass"
:key="randomKey"
@select="rowsCheck"
>
<!-- 多选框 -->
<el-table-column type="selection" width="40" :align="align"></el-table-column>
<!-- 序列 -->
<el-table-column label="序列" width="40px" align="center" fixed="left">
<template #default="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<!-- 表头数据渲染 -->
<template v-for="item in tableHeadConfig.headers">
<!-- 如果列显示 -->
<template v-if="item.hvisible">
<el-table-column :prop="item.colid" :label="item.hlabel" :key="item.hlabel" :sortable="item.hsort" :width="item.hwidth" :align="item.align" :fixed="item.fixed" :show-overflow-tooltip="item.tip" header-align="center">
<template #header v-if="showFilterRow">
<headerParam :header="item" :ref="item.colid + '_param'" @children-change="paramChange" @children-enter="paramEnter" :showEmptyItem="showEmptyItem"> </headerParam>
</template>
<template #default="scope">
<div class="input-box">
<el-date-picker v-model="scope.row[item.colid]" type="date" size="mini" v-if="item.colid === 'reqTime'" style="width: 120px"> </el-date-picker>
<div v-else-if="item.colid === 'applyQty'">
<div v-if="editlist.busiType === '0' && scope.row.applyQty > scope.row.planQty">
<el-row type="flex" align="middle" gutter="10">
<el-col :span="14">
<el-input-number v-model="scope.row.applyQty" controls-position="right" :min="0" :step="1" style="width: 120px" @change="applyQtyBlur"> </el-input-number>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span style="color: red; font-size: smaller">申请数量不能大于计划数量</span>
</el-col>
</el-row>
</div>
<div v-else>
<el-input-number v-model="scope.row.applyQty" controls-position="right" :min="0" :step="1" style="width: 120px" @change="applyQtyBlur"> </el-input-number>
</div>
</div>
<el-input size="small" v-model="scope.row[item.colid]" v-else></el-input>
</div>
</template>
</el-table-column>
</template>
</template>
</el-table>
<-- 页签显示 -->
<el-pagination class="mt_8" v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" small :background="background" layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="sizeChange" @current-change="sizeChange" />
3、控制table表格的添加和删除按钮
#vue部分
<el-form> ... <el-form>
<el-button type="primary" @click="insert">添加</el-button>
<el-button type="danger" @click="delData" v-if="outPlanShow">删除</el-button>
<el-table> ... </el-table>
#js部分
const initTableData = {
}
export default {
data() {
return {
tableData: [],
selectRows: [],
}
},
methods: {
insert() {
const tableData = JSON.parse(JSON.stringify(initTableData))
this.tableData.push(tableData)
},
rowSelect(row) {
this.selectRows= row
},
delData() {
if (this.selectRows.length === 0) {
this.$message.error('请选择数据')
} else {
const checkedData = this.selectRows.map((item) => item.index)
const tableData = this.tableData
this.tableData = tableData.filter((item) => checkedData.indexOf(item.index) === -1)
}
},
}
}
4、数量校验
el-input-number无法加插槽，所以需要用div控制
<div v-else-if="item.colid === 'applyQty'">
<div v-if="scope.row.applyQty > scope.row.planQty">
<el-row type="flex" align="middle" gutter="10">
<el-col :span="14">
<el-input-number v-model="scope.row.applyQty" controls-position="right" :min="0" :step="1" style="width: 120px" @change="applyQtyBlur"> </el-input-number>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<span style="color: red; font-size: smaller">申请数量不能大于计划数量</span>
</el-col>
</el-row>
</div>
<div v-else>
<el-input-number v-model="scope.row.applyQty" controls-position="right" :min="0" :step="1" style="width: 120px" @change="applyQtyBlur"> </el-input-number>
</div>
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
