一、i-table.vue组件的封装
table表格组件的封装很有必要,毕竟有的系统基本上每个页面都会有表格组件,封装起来不会让单页面的代码看起来很臃肿,使用起来也很方便。
template
<template>
<div style="height: 100%;" class="table-div">
<itoolbar :toolbar="toolbar" :toolbarId="toolbarId"></itoolbar>
<div class="i-table">
<div class="table-container">
<el-table ref="table" :id="'table_'+toolbarId" :data="tableData" border :height="height" row-key="id"
@selection-change="handleSelectionChange"
@row-click="rowclick" :row-class-name="tableRowClassName" :row-style="selectHignLiaght"
:highlight-current-row="highlightCurrentRow" @current-change="handleChange">
<el-table-column v-if="showSelection" type="selection" width="55" align="center">
</el-table-column>
<el-table-column v-if="highlightCurrentRow" width="55" align="center">
<template slot-scope="scope">
<el-radio v-model="radiovlaue" :label="scope.$index+''">{
{
}}</el-radio>
</template>
</el-table-column>
<slot></slot>
</el-table>
</div>
<div class="pagination-container" v-if="showPagination">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageInfo.pageIndex"
:page-sizes="[10, 20, 30, 50, 60, 70, 80, 90]"
:page-size="pageInfo.pageSize"
:pager-count="5"
background
layout="total, sizes, prev, pager, next, jumper"
:total="pageInfo.pageTotal">
</el-pagination>
</div>
</div>
</div>
</template>
script
<script>
import debounce from '../modules/debounce.js';
import Itoolbar from './i-toolBar.vue';
import {
EventBus } from '../modules/event-bus';
import Sortable from 'sortablejs';
export default {
name: 'i-table',
components: {
Itoolbar},
props: {
toolbarId: {
// 绑定的id
type: String,
default: ''
},
showSelection: {
// 是否多选
type: Boolean,
default: true
},
showPagination: {
// 是否显示分页
type: Boolean,
default: true
},
highlightCurrentRow: {
// 是否单选
type: Boolean,
default: false
},
itemList: {
// 表头数据
type: Array,
default: () => {
return []
}
},
toolbar: {
// 表头按钮
type: Array,
default: () => {
return []
}
},
searchList: {
// 表头查询数据集
type: Array,
default: () => {
return []
}
},
pageInfo: {
// 表格分页
type: Object,
default: () => {
return {
pageIndex: 1, // 当前页
pageSize: 10, // 每页行数
pageTotal: 0 // 页总数
}
}
},
// tableData: { // 表格数据
// type: Array,
// default: () => {
// return []
// }
// },
selectHignLiaght: {
// style
type: Function,
default: