vue表格排序、显示列等组组件

目录

一：项目效果​编辑

二：项目说明

三：组件源码

四：调用源码 

一：项目效果

二：项目说明

1. 项目框架

   项目使用 vue elemennt

2. 调用说明

   1.控制是否显示设置，默认true
       1）控制表格列的显示和隐藏
       2）控制列的对齐方式
       3）控制列的固定位置
       4）控制列的排序
   2.控制是否加载，默认false
   3.控制表格是否显示边框，默认true
   4.控制表格的尺寸，默认size为large
   5.控制表格是否显示单选或多选，默认undefined没有选择，type: 'checkbox'为多选，type: 'radio'为单选，rowSelection,选中的回调
   6.控制分页的位置，默认bottomCenter
   7.控制排序，sortable是true显示，false隐藏，非必传
   8.控制筛选，tableScreen: '税额',筛选字段跟title一至，非必传
   9.过滤，非必传
       1）filterMode: 'tree', // 指定筛选菜单的用户界面 默认menu
       2）filterSearch: true, // 筛选菜单项是否可搜索 false
       3）filterMultiple: true, // 过滤单选，默认为true多选
   10.通用按钮操作 tableButtons 操作按钮，传对象[{title: '按钮名称'，event: '按钮事件'}] ，必传
   11.自定义按钮 component: mButtonNumber

3. 自定义按钮

   /* 自定义按钮 { { scope.row }} */
   const mButtonNumber = {
     props: ["item"],
    template: `
    <el-table-column :label="item.title" :sortable="item.sortable" :align="item.align" :width="item.width" :fixed="item.fixed" >
    <template slot-scope="scope">
    <template v-for="(it, index) in item.tableButtons">
    <el-button :key="index" v-if="scope.row.age === 12" @click.stop="it.event(scope.row)">{ {it.title}}</el-button>
    </template>
    </template>
    </el-table-column>`,
   }

三：组件源码

<template>
    <div class="XTable">
        <div class="set" v-if="showSet"><i @click.stop="dialogVisible = true" class="el-icon-setting"></i></div>
        <el-table
                :data="tableData"
                :border="bordered"
                ref="tableSelectedRow"
                :size="size"
                style="width: 100%"
                @selection-change="handleChange"
                @row-click="handleRowClick"
        >
            <!-- 多选 -->
            <el-table-column
                v-if="mSelect === 2"
                :fixed="mSelectFixed? 'left' : ''"
                type="selection"
                align="center"
                width="60"
            ></el-table-column>
            <!-- 单选 -->
            <el-table-column
                v-if="mSelect === 1"
                :fixed="mSelectFixed? 'left' : ''"
                align="center"
                width="60"
            >
                <template slot-scope="scope">
                    <el-radio
                            class="radio"
                            :label="scope.$index"
                            v-model="selectIndex"
                            @change="radioChange(scope)"
                    >&nbsp;
                    </el-radio>
                </template>
            </el-table-column>
            <template v-for="(item, index) in tableColumns">
                <component
                        :key="index"
                        v-if="item.component"
                        :sortable="item.sortable ? item.sortable : false"
                        :is="item.component"
                        :item="item"
                        :align="item.align"
                        :filters="item.filters ? item.filters : null"
                        :filter-method="item.filters ? filterHandler : null"
                        :filter-placement="item.filterPlacement ? item.filterPlacement : ''"
                        :width="item.width || (index == 0 ? 130 : '')"
                        :render-header="item.tableScreen ? renderHeader : null"
                >
                </component>
                <!--存在过滤-->
                <el-table-column
                        v-if="!item.component && item.key !== 'operation'"
                        :fixed="item.fixed"
                        :align="item.align"
                        :label="item.title"
                        :sortable="item.sortable ? item.sortable : false"
                        :filters="item.filters ? item.filters : null"
                        :filter-method="item.filters ? filterHandler : null"
                        :filter-placement="item.filterPlacement ? item.filterPlacement : ''"
                        :prop="item.key"
                        :width="item.width ? item.width : 130"
                        :render-header="item.tableScreen ? renderHeader : null"
                        :formatter="item.formatter"
                >
                </el-table-column>
                <!--<el-table-column v-if="item.key === 'operation' && item.tableButtons && !component" label="操作" :align="item.align">
                    <template slot-scope="scope">
                        <span class="xtable-btns" v-for="it in item.tableButtons" @click.stop="operationButton(it.event, scope.row)" :key="it.title">{
   {it.title}}</span>
                    </template>
                </el-table-column>-->
            </template>
        </el-table>
        <div class="pageStyle" :style="{textAlign: pagePosition }">
            <el-pagination
                    v-if="pagination.current"
                    background
                    :current-page="pagination.current"
                    :page-size="pagination.size"
                    :total="pagination.total"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
        <el-dialog
                title="列表控制"
                :visible.sync="dialogVisible"
                :destroy-on-close="true"
                width="716">
            <div class="operateBtn">
                <div class="tag">
                    <span @click.stop="recoveryBasic">恢复出厂</span><i>|</i>
                    <span @click.stop="showHideAll">全部{
   {isHideAll ? '显示' : '隐藏'}}</span><i>|</i>
                    <span @click.stop="topping">置顶</span><i>|</i>
                    <span @click.stop="bottoming">置底</span><i>|</i>
                    <span @click.stop="moveUp">上移</span><i>|</i>
                    <span @click.stop="moveDown">下移</span>
                </div>
                <el-table
                        :data="setTableData"
                        ref="setTableSelectedRow"
                        style="width: 100%"
                        max-height="530"
                        @selection-change="setSelectedTableChange"
                        @row-click="handleSetRowClick"
                >
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="#"
                            type="index"
                            width="60">
                    </el-table-column>
                    <el-table-column
                            label="列名"
                            prop="title"
                            key="title"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            label="对齐方式"
                            prop="align"
                            key="align"
                            width="180">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.align" placeholder=