目录
一:项目效果![](https://i-blog.csdnimg.cn/blog_migrate/e0c76e8ddbfd52f2195811134293ec6e.png)
二:项目说明
- 项目框架
项目使用 vue elemennt
- 调用说明
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 - 自定义按钮
/* 自定义按钮 { { 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)"
>
</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=