多个table表格与model框结合实现数据的增加和修改

最新推荐文章于 2023-03-22 15:25:09 发布

gyuei

最新推荐文章于 2023-03-22 15:25:09 发布

阅读量553

点赞数

分类专栏： ant design vue

本文链接：https://blog.csdn.net/gyueh/article/details/108887858

版权

需求：
1.进入页面加载table表格数据
2.点击编辑按钮，弹出相应编辑内容的model框；model框的内容要与table选中行的内容一致，作出修改后，table的内容要相应变化
3.点击增加按钮，弹出增加相应内容的model框
4.点击model框的保存按钮，判断当前是修改内容的保存还是新增内容的保存
5.点击作废按钮，删除当前整行内容

html部分代码如下：

<template>
  <keep-alive>
    <router-view v-if="$route.meta.subPage" />
    <a-row :gutter="[16, 16]">
      <a-col :span="24">
        <a-card title="修箱代码" :bordered="false">
          <div slot="extra">
            <a-button type="primary" ghost icon="plus" class="margin-right10" @click="newRecord(1)">新建</a-button>
          </div>
          <div>
            <a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleChangeTable">
              <span slot="action" slot-scope="text, record, index" style="width:150px">
                <a @click="reviseRecord(record, index)" class="margin-right15">修改</a>
                <a @click="delRecord(record, index)" class="color-error">作废</a>
              </span>
            </a-table>
          </div>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card title="修箱计费" :bordered="false">
          <div slot="extra">
            <a-button type="primary" ghost icon="plus" class="margin-right10" @click="newRecord(2)">新建</a-button>
          </div>
          <a-table :columns="columnTitle" :data-source="tableData" :pagination="pagetion" @change="handleChangePage">
            <span slot="action" slot-scope="text, record, index" style="width:150px">
              <a @click="repairRecord(record, index)" class="margin-right15">修改</a>
              <a @click="cutRecord(record, index)" class="color-error">作废</a>
            </span>
          </a-table>
        </a-card>
      </a-col>
      <!----model框---->
      <a-modal v-model="visible" :title="modelTitle" ok-text="保存" @ok="saveRecord" @cancel="handleCancel">
        <a-form-model ref="ruleForm" :model="formModel" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="箱型箱类" prop="containerType" v-if="tableCurrent === 'a'">
            <a-select v-model="formModel.containerType" allowClear>
              <a-select-option :value="item.value" v-for="(item, index) in containerTypeList" :key="index">
                {
  { item.value }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="部件代码" prop="partCode" v-if="tableCurrent === 'a'">
            <a-select v-model="formModel.partCode" allowClear>
              <a-select-option :value="item.value" v-for="(item, index) in partCodeList" :key="index">
                {
  { item.value }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="部件中文名称" prop="partZhName" v-if="tableCurrent === 'a'">
            <a-input v-model="formModel.partZhName" />
          </a-form-model-item>
          <a-form-model-item label="部件英文名称" prop="partEnglishName" v-if="tableCurrent === 'a'">
            <a-input v-model="formModel.partEnglishName" />
          </a-form-model-item>
          <a-form-model-item label="位置代码" prop="locationCode" v-if="tableCurrent === 'a'">
            <a-input v-model="formModel.locationCode" />
          </a-form-model-item>
          <a-form-model-item label="修理代码" prop="repairCode" v-if="tableCurrent === 'a'">
            <a-input v-model="formModel.repairCode" />
          </a-form-model-item>
          <a-form-model-item label="修理中文名称" prop="repairZhName" v-if="tableCurrent === 'a'">
            <a-input v-model="formModel.repairZhName" />
          </a-form-model-item>
          <a-form-model-item label="修理英文名称" prop="repairEnglishName" v-if="tableC