在平常工作中偷遗，尤其是在vue + element 的后臺(tái)管理系統(tǒng)中 用的table 很多未檩，但是直接引用element 封裝的table代碼很多矛辕，造成代碼冗余囤屹。在這個(gè)基礎(chǔ)上又封裝一個(gè)table熬甚，減少代碼。封裝成一個(gè)table 組件就是可以引用肋坚。以下是我封裝的table 如有問(wèn)題提出乡括，謝謝
- 首先就是在main.js中先進(jìn)行引用element 。進(jìn)行使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI,{size: 'small'}); // 全局引用設(shè)置大小 我這里是 small智厌。
- 在 component中 創(chuàng)建文件夾 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="序號(hào)"
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>
<!-- 分頁(yè)組件-->
<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, // 是否要高亮當(dāng)前行
border: false
}
} // table 表格的控制參數(shù)
},
components: {},
methods: {
// 多行選中
handleSelectionChange (val) {
this.multipleSelection = val;
this.$emit('handleSelectionChange', val);
},
//分頁(yè)
handleSizeChange (val) {
console.log(`每頁(yè) ${val} 條`);
this.$emit('handleSizeChange', Number(val));
},
handleCurrentChange (val) {
console.log(`當(dāng)前頁(yè): ${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的把一些靜態(tài)資源可以剝離出來(lái) 建立一個(gè)文件 index.js
let _this = null;
// this 指向問(wèn)題诲泌。
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: '注冊(cè)時(shí)間',
prop: 'display_time',
align: 'center'
},
{
label: '審核狀態(tài)',
prop: 'status',
align: 'center',
render: row => {
if (row.status === '1') {
return '已發(fā)布';
} else if (row.status === '2') {
return '發(fā)布中';
} else if (row.status === '3') {
return '未發(fā)布';
}
}
}
];
// 列表操作事件
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靜態(tài)資源
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); // 設(shè)置this指向
this.getQuery();
},
methods: {
async getQuery () {
const _this = this;
var data = {
size: _this.pagination.size,
current: _this.pagination.current
};
// 數(shù)據(jù)請(qǐng)求事件
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();
}
}
};
