vue中⽤Element-ui封装表单（form）和表格（table）组件动态渲染数据展⽰⽼样⼦，先来个效果图
查询表单数据和表格的列信息以及表格数据都是从后端拿到后⾃动渲染成下⾯的格式，
⼀、先创建表格和表单组件
下⾯的form和table组件，可以直接复制使⽤的，如果你需要！
form.vue
<template>
<div class="ces-search">
<el-form class="form" ref="refForm":size="size" inline :label-width="labelWidth">
<el-form-item v-for='item in searchForm':label="item.label":key='item.prop'class="formItem">
<!--输⼊框-->
<el-input v-if="pe==='Input'"  v-model="searchData[item.prop]"  size="mini":></el-input>
<!--下拉框-->
<el-select v-if="pe==='Select'" v-model="searchData[item.prop]" size="mini" @change="item.change(searchData[item.prop])":>
<el-option v-for="op in item.options":label="op.label":value="op.value":key="op.value"></el-option>
</el-select>
<!--单选-->
<el-radio-group v-if="pe==='Radio'" v-model="searchData[item.prop]">
<el-radio v-for="ra in item.radios":label="ra.value":key="ra.value">{{ra.label}}</el-radio>
</el-radio-group>
<!--单选按钮-->
<el-radio-group v-if="pe==='RadioButton'" v-model="searchData[item.prop]" @change="item.change && item.change(searchData[item.prop]) ">
<el-radio-button v-for="ra in item.radios":label="ra.value":key="ra.value">{{ra.label}}</el-radio-button>
</el-radio-group>
<!--复选框-->
<el-checkbox-group v-if="pe==='Checkbox'" v-model="searchData[item.prop]">
<el-checkbox v-for="ch in item.checkboxs":label="ch.value":key="ch.value">{{ch.label}}</el-checkbox>
</el-checkbox-group>
<!--⽇期-->
<el-date-picker v-if="pe==='Date'" v-model="searchData[item.prop]"></el-date-picker>
<!--时间-->
<el-time-select v-if="pe==='Time'" v-model="searchData[item.prop]" type=''></el-time-select>
<!--⽇期时间-->
<el-date-picker v-if="pe==='DateTime'" type='datetime' v-model="searchData[item.prop]":disabled="item.disable && item.disable(searchData [item.prop])"></el-date-picker>
<!--⽇期范围-->
<el-date-picker v-if="pe==='datetimerange'" type='datetimerange' v-model="searchData[item.prop]"  range-separator="⾄"  start-placeholder ="开始⽇期" end-placeholder="结束⽇期"></el-date-picker>
<!--滑块-->
<!--<el-slider v-if="pe==='Slider'" v-model="searchData[item.prop]"></el-slider>-->
<!--开关-->
<el-switch v-if="pe==='Switch'" v-model="searchData[item.prop]"></el-switch>
</el-form-item>
</el-form>
<el-form class="formT"  inline v-if='isHandle'>
<el-form-item v-for='(item , index) in searchHandle':key="index">
<el-button :type="pe":size="item.size || size" @click='item.handle()'>{{item.label}}</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
props:{
isHandle:{
type:Boolean,
default:true
},
labelWidth:{
type:String,
default:'50px'
},
size:{
type:String,
default:'mini'
},vue element admin
searchForm:{
type:Array,
default:[]
},
searchHandle:{
type:Array,
default:()=>[]
},
searchData:{
type:Object,
default:{}
}
},
data(){
return{
};
},
methods:{
}
}
</script>
<style lang="scss">
.ces-search{
display: flex;
justify-content: space-between;
.formItem{
.el-form-item__label{
width:80px !important;
}
}
}
</style>
table.vue
<!--表格组件-->
<template>
<section class="ces-table-page">
<!--表格操作按钮-->
<section class="ces-handle" v-if='isHandle'>
<el-button v-for='(item , index) in tableHandles':size="item.size || size":type="pe":icon='item.icon' @click="item.handle()":key="index">{{item.la bel}}</el-button>
</section>
<!--数据表格-->
<section class="ces-table">
<el-table
:data='tableData'
:size='size'
:border  ='isBorder'
@select='select'
@select-all='selectAll'
v-loading='loading'
header-row-class-name="header_row_style"
:defaultSelections='defaultSelections'
ref="cesTable">
<el-table-column v-if="isSelection" type="selection" align="center" width="50"></el-table-column>
<el-table-column v-if="isIndex" type="index":label="indexLabel" align="center" width="50"></el-table-column>
<!--数据栏-->
<el-table-column v-for="item in tableCols"
:key="item.id"
:prop="item.prop"
:label="item.label"
:width="item.width"
:align="item.align"
show-overflow-tooltip
:render-header="quire?renderHeader:null"
>
<template slot-scope="scope">
<!-- html -->
<span v-if="pe==='Html'" v-html="item.w)"></span>
<!--按钮-->
<span v-if="pe==='Button'">
<el-button v-for="(btn , index)  in item.btnList"
:disabled="btn.isDisabled && btn.w)"
:type="pe"
:size="btn.size || size"
:icon="btn.icon"
:key="index"
@click="btn.w)">{{btn.label}}</el-button>
</span>
<!--输⼊框-->
<el-input v-if="pe==='Input'" v-model="w[item.prop]":size="size"
:disabled="btn.isDisabled && btn.w)"
@focus="item.focus && item.w)"></el-input>
<!--下拉框-->
<el-select v-if="pe==='Select'" v-model="w[item.prop]":size="size":props="item.props"
:disabled="btn.isDisabled && btn.w)"
@change='item.change && item.w)'>
<el-option v-for="op in item.options":label="op[item.props.label]":value="op[item.props.value]":key="op[item.props.value]"></el-option> </el-select>
<!--单选-->
<el-radio-group v-if="pe==='Radio'" v-model="w[item.prop]"
:disabled="btn.isDisabled && btn.w)"
@change='item.change && item.w)'>
<el-radio v-for="(ra , index) in item.radios":label="ra.value":key="index">{{ra.label}}</el-radio>
</el-radio-group>
<!--复选框-->
<el-checkbox-group v-if="pe==='Checkbox'" v-model="w[item.prop]"
:disabled="btn.isDisabled && btn.w)"
@change='item.change && item.w)'>
<el-checkbox v-for="(ra ,index) in item.checkboxs":label="ra.value":key="index">{{ra.label}}</el-checkbox>
</el-checkbox-group>
<!--评价-->
<el-rate v-if="pe==='Rate'" v-model="w[item.prop]"
:disabled="btn.isDisabled && btn.w)"
@change='item.change && item.w)'></el-rate>
<!--开关-->
<el-switch v-if="pe==='Switch'" v-model="w[item.prop]"
:disabled="btn.isDisabled && btn.w)"
@change='item.change && item.w)'></el-switch>
<!--图像-->
<img v-if="pe==='Image'":src="w[item.prop]" @click="item.handle && item.w)"/>
<!--滑块-->
<el-slider v-if="pe==='Slider'" v-model="w[item.prop]"
:disabled="btn.isDisabled && btn.w)"
:disabled="btn.isDisabled && btn.w)"
@change='item.change && item.w)'></el-slider>
<!--默认-->
<span v-if="!pe"
:
:class="item.itemClass && item.item.w)">{{(item.formatter && item.w))|| w[item.prop]}}</span> </template>
</el-table-column>
</el-table>
</section>
<!--分页-->
<section class="ces-pagination"  v-if='isPagination'>
<el-pagination style='display: flex;justify-content: center;height: 100%;align-items: center;'
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total,sizes ,prev, pager, next,jumper"
:page-size="pagination.pageSize"
:current-page="pagination.pageNum"
:total="al"
></el-pagination>
</section>
</section>
</template>
<script>
export default{
props:{
// 表格型号：mini,medium,small
size:{type:String,default:'medium'},
isBorder:{type:Boolean,default:true},
loading:{type:Boolean,default:false},
// 表格操作
isHandle:{type:Boolean,default:false},
tableHandles:{type:Array,default:()=>[]},
// 表格数据
tableData:{ type:Array,default:()=>[]},
// 表格列配置
tableCols:{ type:Array,default:()=>[]},
// 是否显⽰表格复选框
isSelection:{type:Boolean,default:false},
defaultSelections:{ type:[Array,Object],default:()=>null},
// 是否显⽰表格索引
isIndex:{type:Boolean,default:false},
indexLabel:{type:String,default:'序号'},
// 是否显⽰分页
isPagination:{type:Boolean,default:true},
// 分页数据
pagination:{ type:Object,default:()=>({pageSize:10,pageNum:1,total:0})},
},
data(){
return{
}
},
watch:{
'defaultSelections'(val){
this.$nextTick(function(){
if(Array.isArray(val)){
val.forEach(row=>{
this.$leRowSelection(row)
})
}else{
this.$leRowSelection(val)
}
})
})
}
},
methods:{
// 表格勾选
select(rows,row){
this.$emit('select',rows,row);
},
// 全选
selectAll(rows){
this.$emit('select',rows)
},
/
/
handleCurrentChange(val){
this.pagination.pageNum = val;
this.$emit('refresh');
},
handleSizeChange(val){
this.pagination.pageSize = val;
this.$emit('refresh');
},
// tableRowClassName({rowIndex}) {
//    if (rowIndex % 2 === 0) {
/
/        return "stripe-row";
//    }
//    return "";
// }
renderHeader(h,obj){
return h('span',{class:'ces-table-require'},lumn.label)
},
},
}
</script>
<style>
.
ces-table-require::before{
content:'*';
color:red;
}
.el-pagination{
float: right;
margin-right:10px;
margin-top:5px;
}
</style>
⼆、引⽤组件
下⾯是我项⽬的代码，有些多余的代码我就不删除了，，我会在代码⾥备注每个代码块的作⽤，也⽅便⾃⼰清楚。
<template>
<div class="ces-main">
<search-form
ref="form"
size='mini'
labelWidth ='50px'
:searchData ="searchData"
:searchForm ="searchForm"
:searchHandle="searchHandle"></search-form>
<ces-table
size='mini'
:isSelection='true'
:isIndex='true'
:isPagination='true'
:isHandle='true'
:tableData='tableData'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。