在平常工作中，尤其是在vue + element 的后台管理系统中 用的table 很多，但是直接引用element 封装的table代码很多，造成代码冗余。在这个基础上又封装一个table，减少代码。封装成一个table 组件就是可以引用。以下是我封装的table 如有问题提出，谢谢
- 首先就是在main.js中先进行引用element 。进行使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size: 'small'}); // 全局引用设置大小 我这里是 small。
- 在 component中 创建文件夹 talbe 添加文件 index.vue
<template>
<div class="table-template">
<el-table
id="table"
ref="table"
:data="tableData"
tooltip-effect="dark"
style="width:100%"
element-loading-text="拼命加载中"
border
size="medium"
@selection-change="handleSelectionChange"
@sort-change="sortChange"
>
<el-table-column
v-if="tableOption.mutiSelect"
type="selection"
style="width: 40px;"
align="center"
></el-table-column>
<el-table-column
type="index"
width="50"
label="序号"
align="center"
></el-table-column>
<el-table-column
v-for="(item,index) in tableLabel"
:width="item.width ? item.width : ''"
:key="index"
:align="item.align"
:label="item.label"
:prop="item.prop"
:sortable="item.sortable ? 'custom' : false"
>
<template slot-scope="scope">
<span v-if="item.render">
{{item.render(scope.row)}}
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
v-if="tableHandle.label"
:width="tableHandle.width"
:label="tableHandle.label"
align="center"
class-name="small-padding fixed-width"
>
<!-- button 事件-->
<template slot-scope="scope">
<template v-for="(item,index) in tableHandle.options">
<el-tooltip
class="item btn-xs"
placement="top"
effect="dark"
:key="index"
:content="item.label"
>
<el-button
type="text"
size="mini"
:icon="item.icon"
:disabled="item.disabled"
@click.native.prevent="item.method(index,scope.row)"
>{{item.label}}</el-button>
</el-tooltip>
</template>
</template>
</el-table-column>
</el-table>
<!-- 分页组件-->
<el-pagination
class="table-pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.current ? pagination.current : 1"
:page-sizes="[10,20, 30, 50, 100]"
:page-size="pagination.size ? pagination.size : 10"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total ? pagination.total : 0"
></el-pagination>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
default: () => {
return [];
}
},
tableLabel: {
type: Array,
default: () => {
return [];
}
},
pagination: {
type: Object,
default: () => {
return {
current: 1,
size: 10,
total:0
};
}
},
tableHandle: {
type: Object,
default: () => {
return {};
}
},
tableOption: {
type: Object,
// eslint-disable-next-line vue/require-valid-default-prop
default: {
stripe: false, // 是否为斑马纹 table
highlightCurrentRow: false, // 是否要高亮当前行
border: false
}
} // table 表格的控制参数
},
components: {},
methods: {
// 多行选中
handleSelectionChange (val) {
this.multipleSelection = val;
this.$emit('handleSelectionChange', val);
},
//分页
handleSizeChange (val) {
console.log(`每页 ${val} 条`);
this.$emit('handleSizeChange', Number(val));
},
handleCurrentChange (val) {
console.log(`当前页: ${val}`);
this.$emit('handleCurrentChange', Number(val));
},
sortChange (column) {
// column.order = "ascending" 升序
// column.order = "descending" 降序
this.$emit('sortChange', column);
}
}
};
</script>
<style lang="scss">
.table-template {
.el-table {
color: #333333;
.el-table__header-wrapper {
.has-gutter {
color: #333333 !important;
tr {
th {
background: #fffef9;
}
}
}
}
}
.table-pagination {
background: #fff;
margin-bottom: 20px;
padding: 5px;
text-align: right;
}
}
</style>
- 在组件中可以把table的把一些静态资源可以剥离出来 建立一个文件 index.js
let _this = null;
// this 指向问题。
const sendThis = e=> {
_this = e;
};
// 列表header
const tableHeader = [{
label: '用户名',
prop: 'title',
align: 'center',
sortable: true
},
{
label: '用户名',
prop: 'content',
align: 'center',
sortable: true
},
{
label: '公司名称',
prop: 'title',
align: 'center'
},
{
label: '办公邮箱',
prop: 'email',
align: 'center',
width: '200'
},
{
label: '注册时间',
prop: 'display_time',
align: 'center'
},
{
label: '审核状态',
prop: 'status',
align: 'center',
render: row => {
if (row.status === '1') {
return '已发布';
} else if (row.status === '2') {
return '发布中';
} else if (row.status === '3') {
return '未发布';
}
}
}
];
// 列表操作事件
const tableHandle = {
label: '操作',
width: '200',
options: [{
label: '修改',
code: 'cccc',
method:(index,row)=>{
_this.handleEdit(index, row);
}
},
{
label: '删除',
code: 'gggg',
method:(index,row)=>{
_this.handleDel(index, row);
}
}]
};
export {
tableHeader,
tableHandle,
sendThis
};
- 在组件中直接引用
<template>
<div>
<TableCom
:table-option="tableOption"
:table-data="tableData"
:table-label="tableHeader"
:table-handle="tableHandle"
:pagination='pagination'
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
></TableCom>
</div>
</template>
import TableCom from '@comm/table/index.vue'; // 引用 table 组件
const { tableHeader, tableHandle, sendThis } = require('./index'); // 引用 table静态资源
export default {
name: 'ArticleList',
components: {
TableCom
},
data () {
return {
tableHeader: tableHeader,
tableHandle: tableHandle,
tableData: [],
tableOption: {
mutiSelect: false
},
pagination: {
current: 1,
size: 10,
total:0
}
};
}
mounted () {
sendThis(this); // 设置this指向
this.getQuery();
},
methods: {
async getQuery () {
const _this = this;
var data = {
size: _this.pagination.size,
current: _this.pagination.current
};
// 数据请求事件
const res = await dataAjax({
url: '/article/list/',
loading: true,
data
});
_this.tableData = res.records;
_this.pagination.total = res.total;
},
handleEdit (index, row) {
console.log(row, '1');
},
handleDel (index, row) {
console.log(row, '2');
},
handleSizeChange (val) {
this.pagination.size= val;
this.getQuery();
},
handleCurrentChange (val) {
this.pagination.current = val;
this.getQuery();
}
}
};
网友评论