156 lines
4.2 KiB
Vue
156 lines
4.2 KiB
Vue
<template>
|
|
<div>
|
|
<FormModel
|
|
:formLabel="formLabel"
|
|
@queryList="queryList"
|
|
:exportShow="exportShow"
|
|
>
|
|
<template>
|
|
<slot name="submitScrap"></slot>
|
|
</template>
|
|
</FormModel>
|
|
<el-table
|
|
:data="tableList"
|
|
border
|
|
ref="tableRef"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="45"
|
|
align="center"
|
|
v-if="isSelShow"
|
|
/>
|
|
<el-table-column
|
|
:type="v === 0 ? 'index' : ''"
|
|
v-for="(item, v) in tableProps"
|
|
:key="v"
|
|
:label="item.t_label"
|
|
:prop="item.t_props"
|
|
:width="item.t_width"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
align="center"
|
|
label="操作"
|
|
v-if="handleColShow"
|
|
:width="handleWidth"
|
|
>
|
|
<template slot-scope="{ row }">
|
|
<slot :data="row"></slot>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination
|
|
v-if="pageShow"
|
|
:total="total"
|
|
:page.sync="pageParams.pageNum"
|
|
:limit.sync="pageParams.pageSize"
|
|
@pagination="queryList"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormModel from './formModel.vue'
|
|
export default {
|
|
components: {
|
|
FormModel,
|
|
},
|
|
props: {
|
|
tableProps: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
},
|
|
},
|
|
formLabel: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
},
|
|
},
|
|
sendApi: {
|
|
type: Function,
|
|
default: () => {
|
|
return function () {}
|
|
},
|
|
},
|
|
handleColShow: {
|
|
type: Boolean,
|
|
default: () => {
|
|
return true
|
|
},
|
|
},
|
|
exportShow: {
|
|
type: Boolean,
|
|
default: () => {
|
|
return false
|
|
},
|
|
},
|
|
pageShow: {
|
|
type: Boolean,
|
|
default: () => {
|
|
return false
|
|
},
|
|
},
|
|
/* 是否需要复选框 */
|
|
isSelShow: {
|
|
type: Boolean,
|
|
default: () => {
|
|
return false
|
|
},
|
|
},
|
|
/* 操作栏宽度 */
|
|
handleWidth: {
|
|
type: String,
|
|
default: () => {
|
|
return ''
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
total: 1,
|
|
tableList: [
|
|
{ demo: 555 },
|
|
{ demo: 555 },
|
|
{ demo: 555 },
|
|
{ demo: 555 },
|
|
{ demo: 555 },
|
|
],
|
|
pageParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
async queryList(val, reset) {
|
|
if (reset) {
|
|
this.pageParams.pageNum = 1
|
|
this.pageParams.pageSize = 10
|
|
}
|
|
var params = Object.assign(val, this.pageParams)
|
|
params.beginTime = params.time[0]
|
|
params.endTime = params.time[1]
|
|
const res = await this.sendApi(params)
|
|
console.log(res, '列表数据')
|
|
console.log('查询列表---', val)
|
|
},
|
|
|
|
/* 表格复选框 */
|
|
handleSelectionChange(row) {
|
|
console.log(row, '列表复选框')
|
|
this.$emit('getTableSelectionChange', row)
|
|
},
|
|
/* 清除选中状态 */
|
|
clearSelType() {
|
|
this.$refs.tableRef.clearSelection()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|