表格组件行数据操作

• 操作表格行数据之后，直接修改当前行数据，此类操作不需要重新获取表格数据。（一般适用于当前页面不需要获取新数据）
• 操作表格行数据之后，需要重新获取表格数据。（一般适用于当前页面需要获取新数据）

代码示例：

修改行数据状态：

<!--表格操作列操作后需要刷新页面或操作对应数据-->
<template>
  <!-- 容器 -->
  <div class="bgwh p10 mt5">
    <!-- 表格区域 -->
    <vxe-table class="mt5" border :height="tableHeight" :data="tableData" show-overflow :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE">
      <vxe-table-column field="mofDivCode" title="地区编码" header-align="center" align="left"></vxe-table-column>
      <vxe-table-column field="mofDivName" title="地区名称" header-align="center" align="left"></vxe-table-column>
      <vxe-table-column field="auditState" title="审核状态" header-align="center" align="center">
        <template v-slot="scope">
          <span class="bs-color-green" v-if="scope.row.auditState === AUDIT_STATE.AUDITED">已审核</span>
          <span class="bs-color-red" v-if="scope.row.auditState === AUDIT_STATE.RETURNED">已退回</span>
          <span class="bs-color-yellow" v-else>未审核</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <span class="bs-color-primary poi" @click="handleAudit(scope.row)" v-if="scope.row.auditState === AUDIT_STATE.UNAUDIT">审核</span>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { GET_LOGIN_INFO } from '@/store/login';
import { hasView } from '@/mixin/system';
import {
  innerHeight,
  TABLE_HEADER_CELL_STYLE,
  TABLE_CELL_STYLE,
} from '@/mixin/page';
import fetch from '@/config/fetch';

/**
 * 审核状态
 */
const AUDIT_STATE = {
  UNAUDIT: 1, //未审核
  AUDITED: 2, //已审核
  RETURNED: 3, //已退回
};

export default {
  mixins: [innerHeight],
  data() {
    return {
      tableData: [], //表格数据
      TABLE_CELL_STYLE,
      TABLE_HEADER_CELL_STYLE,
      AUDIT_STATE,
    };
  },
  computed: {
    ...mapGetters([GET_LOGIN_INFO]),
    /**
     * 表格高度
     */
    tableHeight() {
      return this.innerHeight - 160;
    },
  },
  methods: {
    /**
     * 初始化页面
     */
    initPage() {
      this.tableData = [];
      this.getTableData();
    },
    /**
     * 获取表格数据
     */
    getTableData() {
      this.$loading();
      fetch
        .post('/gfr/v1/cb/sync/query/sync/check', {
          setYear: this.GET_LOGIN_INFO.fiscalYear,
        })
        .then(({ data }) => {
          this.tableData = data;
          this.$loadingClose();
        })
        .catch((err) => {
          this.$loadingClose();
          console.error(err);
          this.$message({
            type: 'error',
            message: err.msg,
          });
        });
    },
    /**
     * 获取审核参数
     */
    getAuditParam(row) {
      let params = {
        setYear: this.GET_LOGIN_INFO.fiscalYear,
        mofDivCode: row.mofDivCode,
      };
      return params;
    },
    /**
     * 处理审核
     * 1、获取审核参数
     * 2、调用审核接口进行审核
     * 3、更改当前单位审核状态
     */
    async handleAudit(row) {
      try {
        this.$loading();
        let params = this.getAuditParam(row);
        await this.audit(params);
        // TODO：操作表格行数据之后，直接修改当前行数据，此类操作不需要重新获取表格数据。（一般适用于当前页面不需要获取新数据）
        this.$set(row, 'auditState', AUDIT_STATE.AUDITED);
        this.$message({
          type: 'success',
          message: '审核成功！',
        });
      } catch (err) {
        this.$loadingClose();
        console.error(err);
        this.$message({
          type: 'error',
          message: err.msg,
        });
      } finally {
        this.$loadingClose();
      }
    },
    /**
     * 审核接口调用
     */
    audit(params) {
      return Promise((resolve, reject) => {
        fetch
          .post('/gfr/v1/cb/sync/query/sync/audit', params)
          .then(() => {
            return resolve();
          })
          .catch((err) => {
            return reject(err);
          });
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    let isOpenView = hasView(to.path);
    next((vm) => {
      vm.initPage(isOpenView);
    });
  },
};
</script>

刷新表格数据：

<!--表格操作列操作后需要刷新页面或操作对应数据-->
<template>
  <!-- 容器 -->
  <div class="bgwh p10 mt5">
    <!-- 表格区域 -->
    <vxe-table class="mt5" border :height="tableHeight" :data="tableData" show-overflow :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE">
      <vxe-table-column field="mofDivCode" title="地区编码" header-align="center" align="left"></vxe-table-column>
      <vxe-table-column field="mofDivName" title="地区名称" header-align="center" align="left"></vxe-table-column>
      <vxe-table-column field="auditState" title="审核状态" header-align="center" align="center">
        <template v-slot="scope">
          <span class="bs-color-green" v-if="scope.row.auditState === AUDIT_STATE.AUDITED">已审核</span>
          <span class="bs-color-red" v-if="scope.row.auditState === AUDIT_STATE.RETURNED">已退回</span>
          <span class="bs-color-yellow" v-else>未审核</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <span class="bs-color-primary poi" @click="handleDelete(scope.row)">删除</span>
        </template>
      </vxe-table-column>
    </vxe-table>
    <el-pagination class="r" @size-change="handleSizeChange" @current-change="handleCurrentPageChange" :current-page="page.currentPage" :page-sizes="page.sizes" :page-size="page.pageSize" layout="total, sizes, prev, pager  ,next,jumper" :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { GET_LOGIN_INFO } from '@/store/login';
import { hasView } from '@/mixin/system';
import { pagination } from '@/mixin/page';
import {
  innerHeight,
  TABLE_HEADER_CELL_STYLE,
  TABLE_CELL_STYLE,
} from '@/mixin/page';
import fetch from '@/config/fetch';

/**
 * 审核状态
 */
const AUDIT_STATE = {
  UNAUDIT: 1, //未审核
  AUDITED: 2, //已审核
  RETURNED: 3, //已退回
};

export default {
  mixins: [pagination, innerHeight],
  data() {
    return {
      TABLE_CELL_STYLE,
      TABLE_HEADER_CELL_STYLE,
      AUDIT_STATE,
    };
  },
  computed: {
    ...mapGetters([GET_LOGIN_INFO]),
    /**
     * 表格高度
     */
    tableHeight() {
      return this.innerHeight - 160;
    },
  },
  methods: {
    /**
     * 初始化页面
     */
    initPage() {
      this.page.currentPage = 1;
      this.pageData = [];
      this.getTableData();
    },
    /**
     * 获取表格数据
     */
    getTableData() {
      this.$loading();
      fetch
        .post('/gfr/v1/cb/sync/query/sync/check', {
          setYear: this.GET_LOGIN_INFO.fiscalYear,
        })
        .then(({ data }) => {
          this.$loadingClose();
          this.page.total = data.total;
          this.pageData = data.result;
        })
        .catch((err) => {
          this.$loadingClose();
          console.error(err);
          this.$message({
            type: 'error',
            message: err.msg,
          });
        });
    },
    /**
     * 获取删除参数
     */
    getDeleteParam(row) {
      let params = {
        setYear: this.GET_LOGIN_INFO.fiscalYear,
        mofDivCode: row.mofDivCode,
      };
      return params;
    },
    /**
     * 处理删除
     * 1、获取删除接口参数
     * 2、调用删除接口进行删除
     * 3、刷新表格数据
     */
    async handleDelete(row) {
      try {
        this.$loading();
        let params = this.getDeleteParam(row);
        await this.delete(params);
        this.$message({
          type: 'success',
          message: '删除成功！',
        });
        // TODO：操作表格行数据之后，需要重新获取表格数据。（一般适用于当前页面需要获取新数据）
        this.pageData = [];
      	this.getTableData();
      } catch (err) {
        this.$loadingClose();
        console.error(err);
        this.$message({
          type: 'error',
          message: err.msg,
        });
      } finally {
        this.$loadingClose();
      }
    },
    /**
     * 删除接口调用
     */
    delete(params) {
      return Promise((resolve, reject) => {
        fetch
          .post('/gfr/v1/cb/sync/query/sync/audit', params)
          .then(() => {
            return resolve();
          })
          .catch((err) => {
            return reject(err);
          });
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    let isOpenView = hasView(to.path);
    next((vm) => {
      vm.initPage(isOpenView);
    });
  },
};
</script>