1.组件UsualiyTable.js部分。
import Vue from 'vue';
/**封装公共可编辑表格（不含搜索条件）
* 传过来的参数dataSource 代表表格数据
* columns 代表表格表头
* total 代表数据条数（分页时使用）
* onChange 代表数据回调函数 传给父级所搜条件值在父级请求新数据
* name 代表表格类名 可以控制不同表格样式
* pagination 代表是否分页 （传pagination={true}表示分页表格， 不传表示展示表格不做分页处理）
* sortable 代表是否有排序箭头
* allChange allChange={1}代表与全选的选择框
* 要想表格表内可以编辑 表头要render()进行判断 数据要加上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) {
//外面查询数据注入进来
// if (this.dataSource) {
// this.searchObject = this.searchList;
// this.searchObject1 = this.search;
// }
},
methods: {
//表头渲染方法如果不是方法，返回value的值 如果是 请执行方法
renderHeader: (value, item, index) => {
if (typeof value === 'function') {
return value(item, index);
}
return value;
},
//表格每一列渲染方法 如果有返回方法 请执行 否则输出值
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();
},
//全选时候赋值并且返回选择结果
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();
},
//表格内行选中值
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.页面调用部分直接导入这个组件，传入需要显示的表格表头以及从后台请求返回的表格数据，如果是分页的话，传入pagination
={true}
表示此表格是可以分页的，传入页数，条数，一页多少条等参数即可，以下是父级页面使用组件的方法以及所要传入的参数，要想表格可编辑，可在render()里面return
一个input,或者开关等表单组件，直接上代码。
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 (
);
}
}
}
], //表格头部数据
引入组件，传入数据
3.组件回调分页后调用父组件的请求后台数据方法this.getData（）为调用后台请求.
