#### Basic 列表页

:::demo

```html
<template>
  <div class="pages">
    <gen-table ref="table" :sticky="searchH" :loading="loading" :table-model="tableModel" :table-data="tableData" :table-options="tableOptions" :table-options-width="tableOptionsWidth" :table-data-count="tableDataCount" :search-data="searchData" :refresh="refresh" v-bind="tableProps" :has-selec-items="value" @scrolltoggle="toggle" @select="select" v-on="$listeners">
      <template #status><span>自定义插槽</span> </template>
      <template #dicveit>
        <span>自定义按钮</span>
      </template>
      <template #bottomBar>
        <el-button type="small">自定义按钮</el-button>
      </template>
      <!-- bottomBar -->
    </gen-table>
  </div>
</template>

<script>
  export default {
    name: 'BillsManage',
    components: {
      // DebitNoteDia: () => import('./dialogs/DebitNoteDia/index'),
      // BillsMethods: () => import('./dialogs/BillsMethods/index')
    },
    data() {
      return {
        searchData: {
          type: 1,
          name: 123
        },
        selects: [],
        value: [],
        searchH: 50,
        tableOptionsWidth: 220,
        tableData: [
          {
            createTime: 123,
            createBy: 456,
            typeName: 1,
            status: '哈哈',
            fileExpireTime: 12123
          }
        ],
        tableDataCount: 10,
        // 事件配置
        events: {
          down(row) {
            console.log(row)
            alert('操作')
          }
        },
        //表格配置
        tableOptions: [
          {
            eventName: 'down',
            label: '下载文件'
          },
          {
            template: 'dicveit'
          }
        ],
        tableModel: [
          {
            prop: 'billId',
            label: 'id',
            width: 150,
            attrs: {
              fixed: true
            }
          },
          {
            prop: 'createTime',
            label: '操作时间',
            width: 150,
            attrs: {
              fixed: true
            }
          },
          {
            prop: 'createBy',
            label: '操作人',
            width: 150
          },
          {
            prop: 'typeName',
            label: '导出类型'
          },
          // {
          //   prop: 'billAmount',
          //   label: '操作内容',
          //   renderColumn: (row) => `￥${row.billAmount || 0}`
          // },
          {
            prop: 'status',
            label: '状态',
            width: '100px',
            template: 'status'
          },
          {
            prop: 'fileExpireTime',
            label: '内容'
            // renderColumn: (row) => `￥${row.billAmount || 0}`
          }
        ],
        tableProps: {
          showSelect: true,
          rowKey: 'billId'
        },

        //搜索相关
        searchModel: [
          {
            label: '导出状态',
            type: 'select',
            attrs: { size: 'small', clearable: true },
            prop: 'status',
            optionAttrs: {
              labelKey: 'value',
              valueKey: 'key'
            },
            options: () => new Promise.resolve(this.staticDicts.dataExportStatus)
          },

          // {
          //   type: 'select',
          //   attrs: { size: 'small', clearable: true },
          //   prop: 'adjustType',
          //   options: () => new Promise.resolve(this.staticDicts.importOrExportSelection),

          //   label: '导出类型'
          // },
          {
            type: 'daterange',
            prop: 'createTime',
            label: '导出时间',
            attrs: {
              size: 'small',
              'start-placeholder': '创建开始日期',
              'end-placeholder': '创建结束日期'
            }

            // rangeKeys: ['createBeginTime', 'createEndTime']
          }
        ],
        //自定义相关
        loading: false
      }
    },
    computed: {
      // ...mapGetters(['staticDicts', 'staticDictsFilters', 'userDictList'])
    },
    methods: {
      toggle(v) {
        alert(v)
      },
      listAfter() {},
      select() {},
      // 下载文件
      downFileBtn() {},
      // 操作回调
      refresh() {
        this.selects = []
        this.$refs.pageContainer?.handleReset()
        this.$refs.pageContainer?.clearSelection()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages {
    width: 100%;
    height: 700px;
  }
</style>
```

:::
