父组件HTML
<template>
<div>
<subTable ref="subTableInParent" :tableRules="tableRules" @current-change="onCurrentChange" @selection-change="onSelectionChange" @on-query="refreshTable"></subTable>
</div>
</template>
父组件js
<script>
import subTable from '@/components/commonSub/subTable.vue';
export default {
components:{
subTable
},
data() {
return {
tableRules:null,
tableData: [
{
unitName: "2016-05-02",
proJectTotal: "王小虎",
hehe:"hehe",
},
{
unitName: "2016-05-02",
proJectTotal: "王小虎",
hehe:"1231"
}
],
columns: [
{
title: "单位名称",
prop: "unitName", //后台返回的key
width: "",
required: false, //是否出现“*”
cellRender: "text",//返回的值为text/input（输入框）/select（下拉框）/date（日期插件）
sortAbled: true, //能否排序
sortOrder: "none", //按照哪种方式排序
filterAbled: false, //能否过滤
filterValue: "",
filterPanelVisible:false
},
{
title: "项目总数",
prop: "proJectTotal", //后台返回的key
width: "",
required: false, //是否出现“*”
cellRender: "text",
sortAbled: true, //能否排序
sortOrder: "none", //按照哪种方式排序
filterAbled: false, //能否过滤
filterValue: "",
filterPanelVisible:false
},
{
title: "hehe",
prop: "hehe", //后台返回的key
width: "",
required: false, //是否出现“*”
cellRender: "text",
sortAbled: true, //能否排序
sortOrder: "none", //按照哪种方式排序
filterAbled: false, //能否过滤
filterValue: "",
filterPanelVisible:false
}
]
};
},
methods: {
refreshTable(){
var params = {};
//获取排序参数
var orderColumns = this.$refs.subTableInParent.getColumns().filter(column=>column.sortOrder!='none');
if(orderColumns[0]){
params.sortProp = orderColumns[0].prop;
params.sortOrder = orderColumns[0].sortOrder;
}
//获取过滤的参数
var filterColumns = this.$refs.subTableInParent.getColumns().filter(column=>column.filterValue);
if(filterColumns){
filterColumns.forEach((column,index) => {
params['filter'+column.prop] = column.prop;
params['filterValue'+column.prop] = orderColumns[0].filterValue
});
}
//请求后台，获取表格数据，
//请求后台，获取表格数据之后的回调
//this.tableData = res.body.data;
this.$refs.subTableInParent.load(this.tableData)
},
onSelectionChange(selectedRows){
},
onCurrentChange(currentRow){
}
},
created(){
},
mounted(){
this.$refs.subTableInParent.init(this.columns);
this.refreshTable();
}
};
</script>
table组件 subTable.vue
<template>
<el-table :data="rows" border @selection-change="onSelectionChange" style="width: 100%">
<!-- <el-table ref="currentTable" :data="rows" border @selection-change="onSelectionChange" @current-change="onCurrentChange" style="width: 100%"> -->
<!-- 复选框 列 -->
<!-- <el-table-column fixed type="selection" width="55"></el-table-column> -->
<el-table-column type="index" label="序号" width="45" align="center"></el-table-column>
<!-- 操作 列-->
<el-table-column v-if="hasConfig" width="150" label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="editClick(scope.row)">编辑</el-button>
<el-button size="mini" type="info" @click="cancleEdit(scope.row)">取消</el-button>
</template>
</el-table-column>
<!-- tbody -->
<el-table-column align="left" v-for="(column,index) in columns" :key="index" :width="column.width" :prop="column.prop">
<!-- thead 自定义表头-->
<template slot="header" slot-scope="scope">
<!-- 是否排序 -->
<p v-if="column.sortAbled" @click.stop="changeOrder(column)" class="div-inBlock" style="cursor:pointer;display:inline-block;height:100%;">
<span>{{column.title}}</span>
<span class="caret-wrapper">
<i class="sort-caret ascending" :style="{'border-bottom-color':column.sortOrder == 'asc' ? '#409eff' : '#c0c4cc'}"></i>
<i class="sort-caret descending" :style="{'border-top-color':column.sortOrder == 'desc' ? '#409eff' : '#c0c4cc'}"></i>
</span>
</p>
<p v-else class="div-inBlock">
<label style="cursor:pointer">{{column.title}}</label>
</p >
<!-- 是否过滤 -->
<p v-if="column.filterAbled" class="div-inBlock">
<el-popover :ref="'filterPanel'+index" v-model="column.filterPanelVisible" placement="bottom" width="230" trigger="click">
<i class="el-icon-arrow-down" slot="reference" @click.stop="showPanel(column)"></i>
<el-input size="small" :placeholder="column.title" clearable v-model="column.filterValue" class="input-with-select" @keyup.enter.native="onFilter('filterPanel'+index,column)">
<el-button slot="append" icon="el-icon-search" @click.stop="onFilter('filterPanel'+index,column)"></el-button>
</el-input>
</el-popover>
</p>
</template>
<!-- tbody -->
<template slot-scope="scope">
<!--当前行编辑时 -->
<label v-if="scope.row.editAbled">
<div v-if="column.cellRender=='text'">
<el-form :model="scope.row" :rules="tableRules" :ref="'table_form'+column.prop" label-width="0">
<el-form-item label="" :prop="column.prop">
{{scope.row[column.prop]}}
</el-form-item>
</el-form>
</div>
<div v-if="column.cellRender=='input'">
<el-form :model="scope.row" :rules="tableRules" :ref="'table_form'+column.prop" label-width="0">
<el-form-item label="" :prop="column.prop">
<el-input v-model="scope.row[column.prop]"></el-input>
</el-form-item>
</el-form>
</div>
</label>
<!--当前行非编辑时 -->
<label v-else>
{{scope.row[column.prop]}}
</label>
</template>
</el-table-column>
</el-table>
</template>
table组件js
<script>
export default {
props:['tableRules'],
data() {
return {
columns:null,
rows:null,
hasConfig:false
};
},
methods: {
init(columns,hasConfig){//初始化表头
if(hasConfig){
this.hasConfig = true
}else{
this.hasConfig = false
}
columns.forEach(column=>{
column.sortOrder = "none";
column.filterValue = "";
})
this.columns = columns;
},
load(rows){//rows为表格数据
this.rows = rows
},
getColumns(){
return this.columns;
},
showPanel(column){//展示过滤面板
column.filterPanelVisible = true;
},
changeOrder(column){//排序方法
var destOrder = column.sortOrder =="none"?"asc":
column.sortOrder =="asc"?"desc":
column.sortOrder =="desc"?"none":"none";
this.columns.forEach(column=>column.sortOrder="none");
column.sortOrder = destOrder;
//this.$emit("on-query");
},
onFilter(ref,column){//过滤方法
column.filterValue = column.filterValue;
column.filterPanelVisible = false; //或者 this.$refs[ref].forEach(x=>x.doClose())**用来关闭过滤面板**
//this.$emit("on-query");
},
editClick(row) {
this.rows.forEach(row=>row.editAbled = false);
row.editAbled = true;
},
cancleEdit(row) {
this.rows.forEach(row=>row.editAbled = false)
},
onSelectionChange(selectedRows) {//多选
this.$emit("selection-change",selectedRows)
},
onCurrentChange(current) {//当前行选中
//this.$emit("current-change",current)
},
setCurrentRow(row){
this.$refs.currentTable.setCurrentRow(row)
}
}
};
</script>
