陆运信息系统-口岸班列-总结(2)

最新推荐文章于 2024-07-19 21:11:59 发布

肉馅团子

最新推荐文章于 2024-07-19 21:11:59 发布

阅读量479

点赞数

分类专栏： vue-table vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/m0_56830409/article/details/126103660

版权

vue 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

vue-table

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js中使用Vux表格进行数据编辑、添加、删除和保存的操作方法。通过定义函数和配置编辑规则，实现了对表格数据的动态交互，包括利用`Object.assign`设置默认表单数据，以及在表格中添加自定义插槽实现编辑功能。同时，详细展示了编辑、删除和保存按钮的事件处理函数，确保了数据的正确操作和更新。

摘要由CSDN通过智能技术生成

一、子组件与父组件直接的衔接

通过定义一个函数orderForm，通过Object.assign将defaultForm中的字段定义给orderForm

this.orderForm = Object.assign(this.defaultForm, {});

二、在vux-table中点击添加按钮，自动新增一行数据

demo代码：

定义CONTRACT_SCHEMA字段，定义包含在表格内的数据字段

该方式是在前端定义号字段：此方法不是很推荐

在vux-table表格字段中加入:edit-render="{}"，然后定义一个插槽template，编辑为当前行

#edit="{ row }"

<vxe-column
  field="specialTrainLine"
  :title="$t('order.list.specialTrainLine')"
  :edit-render="{}"
>
  <template #edit="{ row }">
    <el-input v-model="row.specialTrainLine" :maxlength="100"></el-input>
  </template>
</vxe-column>

编辑按钮方法

  // 编辑
    editItem(row) {
      this.$refs.contractInfoForm.setActiveRow(row).then(() => {
        this.curRow = { ...row };
      });
      // this.$message.error('请选择未处理的数据行');
    },

删除按钮方法

 // 删除
    removeItem(row) {
      if (!row.id) {
        this.$refs.contractInfoForm.clearActived().then(() => {
          this.$refs.contractInfoForm.reloadData(this.tableData);
          this.loadItem();
        });
        return;
      }
      this.$confirm('确定删除这条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.loading = true;
          const url = `/mtls-port/tkImpContractFlow/id/${row.id}`;
          this.$axios.delete(url).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('删除成功');
              this.loadItem();
            }
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },

保存按钮方法

// 保存
    saveItem(row) {
      this.$refs.contractInfoForm.validate(row).then((errMap) => {
        if (errMap) return;
        const tempData = JSON.parse(JSON.stringify(row));
        tempData.refContractId = this.contractId;
        this.loading = true;
        this.$axios
          .post('/mtls-port/tkImpContractFlow/model', tempData)
          .then((response) => {
            if (response.data.code === 200) {
              this.$message.success('保存成功');
              // eslint-disable-next-line no-param-reassign
              row = JSON.parse(JSON.stringify(response.data.data));
              this.curRow = undefined;
              this.$refs.contractInfoForm.clearActived().then(() => {
                this.$refs.contractInfoForm.reloadData(this.tableData);
                this.loadItem();
              });
            }
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },

demo总代码实例

<vxe-table
      :data="tableData"
      border
      stripe
      align="center"
      ref="contractInfoForm"
      :edit-config="{ trigger: 'click', mode: 'row', autoClear: true }"
      :edit-rules="itemRules"
      @edit-closed="editClosedHandler"
      v-loading="loading"
    >
      <vxe-column type="checkbox" width="50"></vxe-column>
      <vxe-column
        field="changeArrivalStationName"
        :title="$t('order.list.changeArrivalStationName')"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <railway-auto-complete
            :appendToBody="true"
            v-model="row.changeArrivalStationCode"
            :label.sync="row.changeArrivalStationName"
            @after-change="handleChangeArrival($event, row)"
            style="width: 100%"
          ></railway-auto-complete>
        </template>
      </vxe-column>
      <vxe-column
        field="specialTrainLine"
        :title="$t('order.list.specialTrainLine')"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <el-input v-model="row.specialTrainLine" :maxlength="100"></el-input>
        </template>
      </vxe-column>
      <vxe-column
        field="changeConsignee"
        :title="$t('order.list.changeConsignee')"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <cs-auto-complete
            :appendToBody="true"
            v-model="row.changeConsigneeCode"
            :label.sync="row.changeConsignee"
            :type="1"
            style="width: 100%"
            @after-change="handleChangeConsignee($event, row)"
          ></cs-auto-complete>
        </template>
      </vxe-column>
      <vxe-column field="totalFlowNum" :title="$t('order.list.totalFlowNum')" :edit-render="{}">
        <template #edit="{ row }">
          <st-input
            :placeholder="$t('order.list.totalFlowNum')"
            v-model="row.totalFlowNum"
            type="number"
            @input="(val) => (row.totalFlowNum = val ? val.replace('.', '') : '')"
            :maxlength="100"
          ></st-input>
        </template>
      </vxe-column>
      <vxe-column field="remainFlowNum" :title="$t('order.list.remainFlowNum')"></vxe-column>
      <vxe-column field="remark" :title="$t('order.list.remark')" :edit-render="{}">
        <template #edit="{ row }">
          <el-input v-model="row.remark" :maxlength="100"></el-input>
        </template>
      </vxe-column>
      <vxe-column field="creatorName" :title="$t('order.list.creator')"></vxe-column>
      <vxe-column field="createTime" :title="$t('order.list.creationTime')"></vxe-column>
      <vxe-column align="center" :title="$t('shiftBill.itemList.operation')" width="200">
        <template #default="{ row }">
          <template v-if="$refs.contractInfoForm.isActiveByRow(row)">
            <el-tooltip :content="$t('shiftBill.itemForm.save')" placement="top">
              <el-button
                icon="mtlsfont mtls-baocun_1"
                circle
                size="mini"
                @click="saveItem(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip :content="$t('shiftBill.itemForm.delete')" placement="top">
              <el-button
                icon="el-icon-delete"
                :disabled="row.isReplaced === 'Y'"
                circle
                size="mini"
                @click="removeItem(row)"
              ></el-button>
            </el-tooltip>
          </template>
          <template v-else>
            <el-tooltip :content="$t('shiftBill.itemForm.edit')" placement="top">
              <el-button
                icon="el-icon-edit"
                circle
                size="mini"
                @click="editItem(row)"
                :disabled="disable"
              ></el-button>
            </el-tooltip>
            <el-tooltip :content="$t('shiftBill.itemForm.delete')" placement="top">
              <el-button
                icon="el-icon-delete"
                :disabled="row.isReplaced === 'Y'"
                circle
                size="mini"
                v-loading="disable"
                @click="removeItem(row)"
              ></el-button>
            </el-tooltip>
          </template>
        </template>
      </vxe-column>
    </vxe-table>