表尾插槽

<template>
  <div
    style="margin: auto; max-width: 1600px; height: 600px; position: relative">
    <!-- 实际开发中需要传入request方法 -->
    <oce-general
      ref="general"
      :urlInfo="urlInfo"
      :option="generalOption"
      @tab-change="tabChange">
      <template #table-top>
        <oce-general-test :option.sync="generalOption" />
      </template>
      <!-- 插槽名称 #table-footer-标签名称-列名称 -->
      <template #table-footer-test_tab-name="scoped">
        <div :style="{background: scoped.$rowIndex == 0 ? 'red' : 'green', color: 'white'}">{{ footerContent(scoped) }}</div>
      </template>
    </oce-general>
  </div>
</template>

<script>
  export default {
    name: 'GeneralFooterSlotDemo',
    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: () => {
              if (this.activeTab == 'test_tab') return [['行1'], ['行2']]
              return []
            }, // 表尾数据，必须是二维数组
          },
        },
        activeTab: 'test_tab'
      }
    },
    props: {},
    components: {},
    watch: {},
    computed: {},
    methods: {
      tabChange(tab) {
        this.activeTab = tab
      },
      footerContent(scoped) {
        console.log(scoped)
        return scoped.items[0] + '-' + scoped.column.title
      }
    },
    created() {},
    mounted() {},
  }
</script>

Expand Copy Copy