老样子,先来个效果图
查询表单数据和表格的列信息以及表格数据都是从后端拿到后自动渲染成下面的格式,
一、先创建表格和表单组件
下面的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="item.type==='Input'" v-model="searchData[item.prop]" size="mini" :style="{width:item.width}"></el-input>
<!-- 下拉框 -->
<el-select v-if="item.type==='Select'" v-model="searchData[item.prop]" size="mini" @change="item.change(searchData[item.prop])" :style="{width:item.width}">
<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="item.type==='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="item.type==='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="item.type==='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="item.type==='Date'" v-model="searchData[item.prop]" ></el-date-picker>
<!-- 时间 -->
<el-time-select v-if="item.type==='Time'" v-model="searchData[item.prop]" type=''></el-time-select>
<!-- 日期时间 -->
<el-date-picker v-if="item.type==='DateTime'" type='datetime' v-model="searchData[item.prop]" :disabled="item.disable && item.disable(searchData[item.prop])"></el-date-picker>
<!-- 日期范围 -->
<el-date-picker v-if="item.type==='datetimerange'" type='datetimerange' v-model="searchData[item.prop]" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
<!-- 滑块 -->
<!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
<!-- 开关 -->
<el-switch v-if="item.type==='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="item.type" :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'
},
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="item.type" :icon='item.icon' @click="item.handle()" :key="index">{{item.label}}</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="item.require?renderHeader:null"
>
<template slot-scope="scope" >
<!-- html -->
<span v-if="item.type==='Html'" v-html="item.html(scope.row)"></span>
<!-- 按钮 -->
<span v-if="item.type==='Button'" >
<el-button v-for="(btn , index) in item.btnList"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
:type="btn.type"
:size="btn.size || size"
:icon="btn.icon"
:key="index"
@click="btn.handle(scope.row)">{{btn.label}}</el-button>
</span>
<!-- 输入框 -->
<el-input v-if="item.type==='Input'" v-model="scope.row[item.prop]" :size="size"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@focus="item.focus && item.focus(scope.row)"></el-input>
<!-- 下拉框 -->
<el-select v-if="item.type==='Select'" v-model="scope.row[item.prop]" :size="size" :props="item.props"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'>
<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="item.type==='Radio'" v-model="scope.row[item.prop]"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'>
<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="item.type==='Checkbox'" v-model="scope.row[item.prop]"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'>
<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="item.type==='Rate'" v-model="scope.row[item.prop]"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'></el-rate>
<!-- 开关 -->
<el-switch v-if="item.type==='Switch'" v-model="scope.row[item.prop]"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'></el-switch>
<!-- 图像 -->
<img v-if="item.type==='Image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)"/>
<!-- 滑块 -->
<el-slider v-if="item.type==='Slider'" v-model="scope.row[item.prop]"
:disabled="btn.isDisabled && btn.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'></el-slider>
<!-- 默认 -->
<span v-if="!item.type"
:style="item.itemStyle && item.itemStyle(scope.row)"
:class="item.itemClass && item.item.itemClass(scope.row)">{{(item.formatter && item.formatter(scope.row)) || scope.row[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="pagination.total"
></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.$refs.cesTable.toggleRowSelection(row)
})
}else{
this.$refs.cesTable.toggleRowSelection(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'},obj.column.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'
:tableCols='tableCols'
:pagination='pagination'
@refresh="handleCurrentChange"
>
</ces-table>
</div>
</template>
<script>
import {
getTableAndForm, //获取资产目录详情下的数据展示的动态表格和表单
} from '@/api/assetsManage/table/index.js';
import {
getQuery //查询接口
} from '@/api/assetsManage/assets/index.js';
//引入组件
import SearchForm from '@/components/form.vue'
import cesTable from '@/components/table.vue'
export default {
data(){
//表单查询一般分为input,下拉框,和日期,下面是下拉框时的设置下拉信息的情况,我的项目没有用到,但是留着方便看
//let sexs=[{label:'男',value:'M'},{label:'女',value:'F'}]
// let sexProps={label:'label',value:'value'}
return {
searchData:{ //查询表单的对应的值
// name:'',
// sex:null,
},
searchForm:[ //这里是渲染查询表单的表头和类型的数据
// {type:'Input',label:'姓名',prop:'name', width:'180px',placeholder:'请输入姓名...'},
// {type:'Select',label:'性别',prop:'sex',width:'180px',options:sexs,props:sexProps,change:row=>'',placeholder:'请选择性别...'},
],
searchHandle:[ //查询和重置按钮
{label:'查询',type:'primary',handle:this.handleQuery},
{label:'重置',type:'primary',handle:this.handleReset}
],
apiId:'null',
fieldList:[],
// 表格
tableData:[],//表格数据
tableCols:[ //表格列数据
// {label:'姓名',prop:'name'},
// {label:'年龄',prop:'age'},
],
// tableHandles:[ //这是表格和表单之间的一个按钮,我的项目不需要
// {label:'新增',type:'primary',handle:row=>''}
// ],
pagination:{ //分页数据
pageSize:10,
pageNum:1,
total:0
},
}
},
components:{ //引入组件后注册组件
cesTable,
SearchForm
},
mounted(){
this.getTableAndForm()
},
methods:{
//此方法是点击分页时触发的查询,
handleCurrentChange(){
this.getQuery()
},
//获取表格和表单数据
async getTableAndForm(){
//...
},
//查询
getQuery(){
//...
},
handleQuery(){ //查询
this.getQuery()
},
handleReset(){ /重置
for(var i in this.searchData){
this.$set( this.searchData, i, '')
}
this.getQuery()
}
}
}
</script>
<style lang="scss" scoped>
</style>
好了,定义组件是为了方便使用,希望在记录自己学习的时候,也可以帮到你!
版权声明:本文为qq_44182284原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。