一个基于vue功能强大的表格组件--vxe-table的二次封装(二)

接上一章:

在你要使用表格的vue页面中,写入以下代码

               id="out-table"
               :data="tableData"
               v-loading="loading"
               element-loading-text="数据量大,拼命加载中"
               :toolbarConfig="toolbarConfig"
               :columns="columns"
               :showFooter="true"
               :footerMethod="footerMethod"
               :tablePage="tablePage"
               @pageChange="pageChange">
               <div class="button">
          <el-button type="primary"
                     size="small"
                     icon="el-icon-plus"
                     style="width: 100px;"
                     @click="toAddData()">新增数据</el-button>
          <el-button size="small"
                     type="warning"
                     icon="el-icon-edit"
                     @click="updateFundChannel()">修改</el-button>
          <el-button size="small"
                     type="danger"
                     icon="el-icon-delete"
                     @click="deleteFundChannel()">删除</el-button>
          <el-button size="small"
                     icon="el-icon-download"
                     type="success"
                     @click="exportExcels()">导出表格</el-button>
        </div>
      </s-table>

在外面包裹一个div盒子,便于修改样式,会容易修改.

页面样式:

js代码块中写入

      // 表格页码设置
      tablePage: {
        showPage: true,
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      toolbarConfig: { // 工具栏配置
        custom: true,
        zoom: true,
        export: true,
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      columns: [ // 每列信息
        { type: 'radio', width: 50, fixed: 'left' },
        { title: '序号', type: 'seq', width: 50, fixed: 'left' },
        {
          title: '总行', field: 'bank_main_name', sortable: true, fixed: 'left', minWidth: 150,
          filters: [{ data: { vals: [], sVal: '' } }],
          filterRender: { name: 'SelcetFilter', optionsList: [] }
      ]

最后调整下样式即可