显示表尾

<template>
  <div
    style="margin: auto; max-width: 1600px; height: 600px; position: relative"
  >
    <!-- 实际开发中需要传入request方法 -->
    <oce-general
      ref="general"
      :urlInfo="urlInfo"
      :option="generalOption"
    >
      <template #toolbar-menu-left>
        <el-button size="mini" @click="updateFooter">修改 id-总计</el-button>
      </template>
    </oce-general>
  </div>
</template>

<script>

export default {
  name: 'GeneralFooter',
  data() {
    return {
      urlInfo: {
        optionUrl: {
          url: '/system/webTable/tableInfo',
          method: 'post',
          webTableName: 'testTable',
        },
        dataUrl: {
          url: '/system/webTable/tableData',
          method: 'post',
        },
      },
      generalOption: {
        searchMenuSpan: 6, // 搜索框按钮宽度(4)
        tableOption: {
          showFooter: true, // 显示表尾
          footerMethod: this.footerMethod // 表尾数据，必须是二维数组
        },
      },
      defFooter: [['总计',1,,3,4],['其他',4,5,6,]]
    }
  },
  props: {},
  components: {},
  watch: {},
  computed: {},
  methods: {
    updateFooter() {
      this.defFooter[0][4]++
      this.$refs.general.tableMethods('updateFooter')
    },
    footerMethod(data) {
      let sumAge = 0
      data?.data.forEach(el => sumAge += Number(el.age))
      let footerData = this.$ocean.deepClone(this.defFooter)
      footerData[0][3] = sumAge
      return footerData
    }
  },
  created() {},
  mounted() {
  },
}
</script>

Expand Copy Copy