1.組件UsualiyTable.js部分践叠。
import Vue from 'vue';
/**封裝公共可編輯表格（不含搜索條件）
* 傳過來的參數(shù)dataSource? 代表表格數(shù)據(jù)
* columns? 代表表格表頭
* total? 代表數(shù)據(jù)條數(shù)（分頁時使用）
* onChange? 代表數(shù)據(jù)回調(diào)函數(shù)? 傳給父級所搜條件值在父級請求新數(shù)據(jù)
* name? 代表表格類名? 可以控制不同表格樣式
* pagination? 代表是否分頁 （傳pagination={true}表示分頁表格郊霎， 不傳表示展示表格不做分頁處理）
* sortable? 代表是否有排序箭頭
* allChange? allChange={1}代表與全選的選擇框
* 要想表格表內(nèi)可以編輯? 表頭要render()進(jìn)行判斷? 數(shù)據(jù)要加上edit=false表示可編輯表格蟹漓。
*/
export default {
name: 'UsualiyTable',
data() {
return {
page: 1,
pageSize: 10,
order: 'createDate',
multipleSelection: []
};
},
props: ['dataSource', 'columns', 'total', 'onChange', 'allChange', 'deleteFunc', 'pagination', 'sortable', 'loading'],
computed: {
},
beforeUpdate(nextProps) {
//外面查詢數(shù)據(jù)注入進(jìn)來
// if (this.dataSource) {
//? ? this.searchObject = this.searchList;
//? ? this.searchObject1 = this.search;
// }
},
methods: {
//表頭渲染方法如果不是方法泛释，返回value的值? 如果是? 請執(zhí)行方法
renderHeader: (value, item, index) => {
if (typeof value === 'function') {
return value(item, index);
}
return value;
},
//表格每一列渲染方法? 如果有返回方法? 請執(zhí)行 否則輸出值
renderRow: (render, row, columns, value, index, render1) => {
if (typeof render === 'function') {
value = render(value, row, index);
}
return value;
},
change() {
let obj = {
page: this.page,
pageSize: this.pageSize,
order: this.order
};
this.$emit('change', obj);
},
handleSizeChange(value) {
console.log('value11', value);
this.pageSize = value;
this.page = 1;
this.change();
},
handleCurrentChange(value) {
console.log('value', value);
this.page = value;
this.change();
},
submit() {
this.change();
},
//全選時候賦值并且返回選擇結(jié)果
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('deleteFunc', val);
console.log('multipleSelection', val);
},
//排序
sortMaskListData(param) {
this.sort = param.prop;
if (param.order === 'ascending') {
this.order = 'asc';
} else {
this.order = 'desc';
}
this.change();
},
//表格內(nèi)行選中值
handleSelectGoods(row) {
this.$emit('rowClick', row);
}
},
render() {
let _this = this;
return (
{
_this.allChange === 1 ?
type="selection"
width="55">
: ''
}
{
_this.columns.length > 0 ? _this.columns.map(function(item, index) {
if (item.sortable) {
return (
header-align='center'
align={item.align || 'left'}
label={_this.$STR(item.label, item.title)}
prop={item.dataIndex}
key={item.key || item.dataIndex}
render-header={_this.renderHeader.bind(null, item.title, _this.dataSource[index], index)}
width={item.width || ''}
formatter={_this.renderRow.bind(null, item.render)}
show-overflow-tooltip={true}
sortable
>
);
} else {
return (
header-align='center'
align={item.align || 'left'}
label={_this.$STR(item.label, item.title)}
prop={item.dataIndex}
key={item.key || item.dataIndex}
render-header={_this.renderHeader.bind(null, item.title, _this.dataSource[index], index)}
width={item.width || ''}
formatter={_this.renderRow.bind(null, item.render)}
show-overflow-tooltip={true}
>
);
}
}) : ''
}
{
_this.pagination ?
on-size-change={(value) => { _this.handleSizeChange(value); }}
on-current-change={(value) => { _this.handleCurrentChange(value); }}
current-page={_this.page}
page-sizes={[10, 20, 30, 40]}
page-size={_this.pageSize}
layout="total, sizes, prev, pager, next, jumper"
total={_this.total || 0}>
: ''
}
);
}
};
2.頁面調(diào)用部分直接導(dǎo)入這個組件衫哥，傳入需要顯示的表格表頭以及從后臺請求返回的表格數(shù)據(jù)圃伶，如果是分頁的話，傳入pagination
={true}
表示此表格是可以分頁的烈疚，傳入頁數(shù)黔牵，條數(shù)，一頁多少條等參數(shù)即可爷肝，以下是父級頁面使用組件的方法以及所要傳入的參數(shù)，要想表格可編輯陆错，可在render()里面return
一個input,或者開關(guān)等表單組件灯抛，直接上代碼。
1.表頭部分：
columns: [{
title: '序列',
dataIndex: 'index',
key: 'index',
width: '50',
align: 'right',
label: 'Operation:Delete:Hint', //可以做多語言的_this.$STR('', '序列')
render: (value, item, index) => {
return index + 1;
}
},
{
title: '訂單編號',
dataIndex: 'orderNo',
key: 'orderNo',
sortable: true,
render: (value, item) => {
return
}
},
{
title: '申請碼量',
dataIndex: 'applyAmount',
key: 'applyAmount',
align: 'right',
sortable: true,
render: (value, item) => {
//console.log('typeof', typeof value);
let apply = item.apply ? item.apply : {};
let b = apply.applyAmount.toString().replace(/(\d{1,3})(?=(\d{3})+$)/g, function($1) { return $1 = $1 + ','; });
return b;
}
}
},
{
title: '操作',
dataIndex: '',
key: '',
render: (value, item) => {
if (item.status === 0 || item.status === 2) {
return (
{ this.addNewApplic(item); }}>審核
);
} else {
return (
);
}
}
}
], //表格頭部數(shù)據(jù)
引入組件音瓷，傳入數(shù)據(jù)
3.組件回調(diào)分頁后調(diào)用父組件的請求后臺數(shù)據(jù)方法this.getData（）為調(diào)用后臺請求.
