<!--
dataList: 表格数据
columnList: 表头字段 宽度minWidth
使用slotName字段: 需要对列数据进行处理，不写prop字段，使用slotName字段
btnText<String>: 按钮字段
btnIcon<String>: 按钮的icon
btnEvent: 按钮事件
btnType: 按钮类型
getHeight<String>: 表格高度
pagination: 分页回调方法
formItemList: 查询条件List -----label字段名 type类型(select、input、daterange、cascader)
select(selectOptions下拉框数据、defaultSelect下拉框默认选中数据)
cascader(options级联选择框数据) param(用来接收查询参数)
search: 查询事件
isAddBtn: 是否显示添加按钮
-->
<template>
<div class="app-container">
<el-form
:inline="true"
ref="ruleForm"
:model="formInline"
class="demo-form-inline"
>
<el-form-item
v-for="(item, index) in formItemList"
:key="index"
:label="item.label"
>
<!-- 下拉选择框 -->
<el-select
v-if="item.type == 'select'"
v-model="formInline[item.param]"
:multiple="item.multiple"
placeholder="请选择"
size="mini"
clearable
>
<el-option
v-for="(item2, index2) in item.selectOptions"
:key="index2"
:label="item2.dictLabel"
:value="item2.dictValue"
></el-option>
</el-select>
<!-- 下拉选择框end -->
<!-- 输入框 -->
<el-input
v-if="item.type == 'input'"
v-model="formInline[item.param]"
size="mini"
placeholder="请输入"
clearable
></el-input>
<!-- 输入框 -->
<!-- 日期范围选择框 -->
<el-date-picker
v-if="
item.type == 'daterange' ||
item.type == 'datetimerange' ||
item.type == 'date' ||
item.type == 'datetime'
"
v-model="formInline[item.param]"
:value-format="item.valueFormat || 'yyyy-MM-dd hh:mm:ss'"
:format="item.format || 'yyyy-MM-dd hh:mm:ss'"
clearable
:type="item.type || ''"
:range-separator="item.rangeSeparator || '至'"
:start-placeholder="item.startPlaceholder"
:end-placeholder="item.endPlaceholder"
placeholder="请选择"
size="mini"
>
</el-date-picker>
<!-- 日期范围选择框end -->
<!-- 级联选择器 -->
<el-cascader
v-if="item.type == 'cascader'"
v-model="formInline[item.param]"
size="mini"
:options="item.options"
:props="item.props"
clearable
></el-cascader>
<!-- 级联选择器end -->
</el-form-item>
<slot name="formItem"></slot>
<el-form-item style="width:10rem">
<el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
<el-button type="" size="mini" @click="resetForm('ruleForm')"
>重置</el-button
>
</el-form-item>
<!-- 可用于显示其他按钮 -->
<el-form-item style="width:10rem" v-if="isAddBtn">
<el-button :type="btnType" :icon="btnIcon" @click="btnEvent">{{ btnText }}</el-button>
</el-form-item>
</el-form>
<el-table
ref="table"
v-loading="loading"
:data="dataList"
:height="getHeight"
stripe
:header-cell-style="headerCellStyle"
>
<el-table-column label="序号" align="center" width="50" type="index" />
<el-table-column
v-for="(item, index) in columnList"
ref="table"
:label="item.label"
:key="index"
:prop="item.prop"
:fixed="item.fixed"
:min-width="item.minWidth"
align="center"
>
<template slot-scope="scope">
<slot v-if="item.slotName" :name="item.slotName" :row="scope.row"></slot>
<div v-else>{{scope.row[item.prop]}}</div>
</template>
</el-table-column>
</el-table>
<div class="tabListPage">
<el-pagination
small
class="text-center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.page"
:page-sizes="pageSizes"
:page-size="page.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
ref="pagination"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data(){
let formInline = {};
for (const obj of this.formItemList) {
formInline[obj.param] = obj.defaultSelect || "";
}
return{
formInline,
loading:false,
headerCellStyle:{background:'#4d5564',textAlign:'center',flexWrap:'wrap',color:'#fff',fontWeight:'600'},
pageSizes: [10, 20, 50, 100],
page: {
page: 1,
limit: 10,
},
}
},
props:{
dataList:{
type:Array,
},
columnList:{
type:Array,
},
btnText:{
type:String,
default:'增加'
},
btnIcon:{
type:String,
default:'el-icon-plus'
},
getHeight:{
type:String,
default:'730'
},
total: {
type: Number,
},
btnType:{
type:String,
default:'primary'
},
isAddBtn:{
type:Boolean,
default: true
},
formItemList: {
type: Array,
default() {
return [
{
label: "下拉框",
type: "select",
selectOptions: [{ text: 111, value: 111 }],
param: "company",
defaultSelect: "222",
multiple: false
},
{
label: "输入框",
type: "input",
param: "name"
},
];
}
}
},
watch: {
formItemList: {
handler(newVal, oldVal) {
for (const obj of this.formItemList) {
if (obj.defaultSelect) {
this.formInline[obj.param] = obj.defaultSelect;
}
}
},
deep: true
},
total(newdata, olddata) {
if (newdata != olddata) {
this.$refs.pagination.internalCurrentPage = 1;
this.page.limit = 10;
}
},
},
methods:{
btnEvent(){
this.$emit('btnEvent', );
},
handleSizeChange(val) {
this.page.limit = val;
this.page.page = 1;
this.$emit("pageChange", this.page);
},
handleCurrentChange(val) {
this.page.page = val;
this.$emit("pageChange", this.page);
},
onSubmit() {
this.$emit("search", this.formInline);
},
resetForm(formName) {
this.$refs[formName].resetFields();
let formInline = {};
for (const obj of this.formItemList) {
formInline[obj.param] = "";
}
this.formInline = formInline;
this.$emit("search", this.formInline);
}
}
}
</script>
<style>
.headerBox{
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 10px;
}
.tabListPage{
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
}
</style>
