vue,form+table组合新增编辑弹框,table单元格可编辑,table单元格校验

风依絮

已于 2024-03-23 20:45:28 修改

阅读量730

点赞数 5

分类专栏：前端永存文章标签： vue.js javascript elementui

于 2024-03-23 20:26:04 首次发布

本文链接：https://blog.csdn.net/qq_41292133/article/details/136970783

版权

前端永存专栏收录该内容

3 篇文章

订阅专栏

本文详细描述了如何在Vue应用中使用el-table展示子表数据，每个单元格支持编辑，包括弹框添加新数据、表头筛选、数量校验等功能，以及添加和删除按钮的控制。

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

需求

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>