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

需求：
1.进入页面加载table表格数据
2.点击编辑按钮，弹出编辑内容的model框；model框的内容要与table选中行的内容一致，作出修改后，table的内容要相应变化
3.点击增加按钮，弹出增加内容的model框
4.点击作废按钮，删除当前整行内容
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="addNew">新增</a-button>
          </div>
          <a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
            <div slot="operator" slot-scope="text">{{ text.content1 }}</div>
            <div slot="billNo" slot-scope="text">{{ text.content2 }}</div>
            <div slot="containerType" slot-scope="text">{{ text.content3 }}</div>
            <div slot="reason" slot-scope="text">{{ text.content4 }}</div>
            <div slot="startTime" slot-scope="text">{{ text.content5 }}</div>
            <div slot="endTime" slot-scope="text">{{ text.content6 }}</div>
            <div slot="creater" slot-scope="text">{{ text.content7 }}</div>
            <div slot="state" slot-scope="text">{{ text.content8 }}</div>
            <div slot="action" slot-scope="text, record, index">
              <a @click="reviseRecord(record, index)" class="margin-right15">修改</a>
              <a @click="delRecord(record, index)" class="color-error">作废</a>
            </div>
          </a-table>
          <!-----model框------>
          <a-modal v-model="visible" title="提单拒发编辑" ok-text="保存" @ok="handleOk"  @cancel="handleCancel">
            <a-form-model
              ref="ruleFormModel"
              :model="formModel"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              style="width:95%;"
            >
              <a-form-model-item label="箱经营人" prop="modelOperator">
                <a-select v-model="formModel.modelOperator" placeholder="请选择箱经营人">
                  <a-select-option v-for="item in chargeOperatorList" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="箱型箱类" prop="modelType">
                <a-select v-model="formModel.modelType" placeholder="请选择箱型箱类">
                  <a-select-option v-for="item in chargemodelType" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="提单号" prop="modelBillNo">
                <a-input v-model="formModel.modelBillNo" placeholder="请输入提单号" />
              </a-form-model-item>
              <a-form-model-item label="开始时间" prop="modelStartTime">
                <a-date-picker
                  v-model="formModel.modelStartTime"
                  format="YYYY-MM-DD"
                  placeholder="请选择开始时间"
                  valueFormat="YYYY-MM-DD"
                  style="width:100%;"
                />
              </a-form-model-item>
              <a-form-model-item label="结束时间" prop="modelEndTime">
                <a-date-picker
                  v-model="formModel.modelEndTime"
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  :allowClear="false"
                  placeholder="请选择结束时间"
                  style="width:100%;"
                />
              </a-form-model-item>
              <a-form-model-item label="创建人">
                <a-input v-model="formModel.ModelAuthor" disabled="disabled" />
              </a-form-model-item>
              <a-form-model-item label="拒发原因" prop="modelReason">
                <a-input type="textarea" v-model="formModel.modelReason" placeholder="请输入拒发原因" />
              </a-form-model-item>
            </a-form-model>
          </a-modal>
        </a-card>
      </a-col>
    </a-row>
  </keep-alive>
</template>

js部分代码如下：

<script>
export default {
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      // model框form表单
      formModel: {
        modelOperator: '',
        modelType: '',
        modelBillNo: '',
        modelStartTime: '',
        modelEndTime: '',
        modelReason: ''
      },
      rules: {
        modelOperator: [{ required: true, message: '请选择箱经营人', trigger: 'blur' }],
        modelType: [{ required: true, message: '请选择箱型箱类', trigger: 'blur' }],
        modelBillNo: [{ required: true, message: '请输入提单号', trigger: 'blur' }],
        modelStartTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        modelEndTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        modelReason: [{ required: true, message: '请输入拒发原因', trigger: 'blur' }]
      },
      // model框 箱经营人
      chargeOperatorList: [
        {
          name: '马士基',
          value: 1
        },
        {
          name: '达飞',
          value: 2
        },
        {
          name: '全部',
          value: 3
        }
      ],
      // model框 箱型箱类
      chargemodelType: [
        {
          name: '45`HC',
          value: 1
        },
        {
          name: '20`OT',
          value: 2
        },
        {
          name: '全部',
          value: 3
        }
      ],
      //  table标题
      columns: [
        {
          title: '箱经营人',
          dataIndex: 'operator',
          scopedSlots: { customRender: 'operator' },
          align: 'center'
        },
        {
          title: '提单号',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'billNo' },
          align: 'center'
        },
        {
          title: '箱型箱类',
          dataIndex: 'containerType',
          scopedSlots: { customRender: 'containerType' },
          align: 'center'
        },
        {
          title: '拒发原因',
          dataIndex: 'reason',
          scopedSlots: { customRender: 'reason' },
          align: 'center'
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          scopedSlots: { customRender: 'startTime' },
          align: 'center'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          scopedSlots: { customRender: 'endTime' },
          align: 'center'
        },
        {
          title: '创建人',
          dataIndex: 'creater',
          scopedSlots: { customRender: 'creater' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' },
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: '120px'
        }
      ],
      // table数据
      data: [],
      // model框默认不显示
      visible: false,
      // 用于判断是否选中
      selectKey: [],
      // 用于判断当前model框是新增还是修改
      modelKey: []
    }
  },
  created() {
  // 进入页面开始加载此函数
    this.getReturnInfo()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
        },
        getCheckboxProps: record => ({
          props: {
            operator: record.operator
          }
        })
      }
    }
  },
  methods: {
    // 获取table表格的数据
    getReturnInfo() {
      const items = [
        {
          item1: '马士基1',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        },
        {
          item1: '马士基2',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        },
        {
          item1: '马士基3',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        }
      ]
      const dataTable = []
      items.forEach((item, index) => {
      // 制造table表格的假数据
        const data = {
          key: index,
          operator: {
            content1: item.item1
          },
          billNo: {
            content2: item.item2
          },
          containerType: {
            content3: item.item3
          },
          reason: {
            content4: item.item4
          },
          startTime: {
            content5: item.item5
          },
          endTime: {
            content6: item.item6
          },
          creater: {
            content7: item.item7
          },
          state: {
            content8: item.item8
          }
        }
        dataTable.push(data)
      })
      this.data = dataTable
    },
    // 新增 table数据
    addNew() {
      // 打开model框
      this.visible = true
      // 初始化model框
      this.formModel = {
        modelOperator: '',
        modelType: '',
        modelBillNo: '',
        modelStartTime: '',
        modelEndTime: '',
        modelReason: ''
      }
    },
    // 修改 table中某一行的数据
    reviseRecord(record, index) {
      // 打开model框
      this.visible = true
      // 箱经营人
      this.formModel.modelOperator = record.operator.content1
      // 提单号
      this.formModel.modelBillNo = record.billNo.content2
      // 箱型箱类
      this.formModel.modelType = record.containerType.content3
      // 拒发原因
      this.formModel.modelReason = record.reason.content4
      // 开始时间
      this.formModel.modelStartTime = record.startTime.content5
      // 结束时间
      this.formModel.modelEndTime = record.endTime.content6
      // 创建人
      this.formModel.ModelAuthor = record.creater.content7
      // 获取model的key值
      this.modelKey = index
      console.log(this.modelKey)
    },
    // 点击model框保存按钮 提交数据
    handleOk(e) {
      this.loading = true
      var key = this.modelKey
      // 当key值存在时且为数字类型时 保存model框修改的内容
      if (typeof key === 'number') {
        // 箱经营人
        this.data[key].operator.content1 = this.formModel.modelOperator
        // 提单号
        this.data[key].billNo.content2 = this.formModel.modelBillNo
        // 箱型箱类
        this.data[key].containerType.content3 = this.formModel.modelType
        // 拒发原因
        this.data[key].reason.content4 = this.formModel.modelReason
        // 开始时间
        this.data[key].startTime.content5 = this.formModel.modelStartTime
        // 结束时间
        this.data[key].endTime.content6 = this.formModel.modelEndTime
        console.log(this.data[key].endTime)
        this.modelKey = null
      } else {
        // 当key值不存在时 新增model框的数据到table
        this.$refs.ruleFormModel.validate(valid => {
          if (valid) {
            const record = Object.assign({}, this.formModel)
            this.infoData.push(record)
            // 关闭model框
            this.visible = false
          } else {
            return false
          }
        })
      }
      // 关闭model框
      this.visible = false
    },
    // 删除 table中的某一行
    delRecord(record, index) {
      this.$confirm({
        title: '提示',
        type: 'error',
        content: '确认删除此条数据吗',
        onOk: () => {
          this.data.splice(index, 1)
        },
        onCancel() {}
      })
      console.log(this.data)
    },
    // 取消
    handleCancel(e) {
      // 将所有字段值重置为初始值并移除校验结果
      this.$refs.ruleFormModel.resetFields();
      this.visible = false;
    }
  }
}
</script>

css部分代码如下：

<style lang="less" scoped>
	.color-error {
	 	 color: #ff4d4f;
	}
	.color-success {
	  	 color: #4cd964;
	}
	.margin-right10 {
		 margin-right: 10px;
	}
	.margin-right15 {
	     margin-right: 15px;
	}
	.ant-form-item {
	     margin-bottom: 4px;
	}
</style>

最终效果：
1.进入页面时

2.点击编辑时

3.点击新增按钮时