element form && tabel 的二次封装及使用＜vue＞

form 表单 search

<!-- 搜索表单 -->
<template>
<div class="ces-search">
    <el-form :size="size" inline :label-width="labelWidth">
        <el-form-item v-for='item in searchForm' :label="item.label" :key='item.prop'>
            <!-- 输入框 -->
            <el-input v-if="item.type==='Input'" v-model="searchData[item.prop]" size="mini" ></el-input>
            <!-- 下拉框 -->
            <el-select v-if="item.type==='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="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-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 inline v-if='isHandle'>
        <el-form-item v-for='item in searchHandle' :key="item.label">
            <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:'100px'
        },
        size:{
            type:String,
            default:'mini'
        },
        searchForm:{
            type:Array,
            default:[]
        },
        searchHandle:{
            type:Array,
            default:()=>[]
        },
        searchData:{
            type:Object,
            default:{}
        }
    },
    data () {
        return {
        };
    },

}

</script>
<style>
</style>

form 的使用

 <search-form 
      size='mini'
      labelWidth = '80px' 
      :searchData = "searchData"
      :searchForm = "searchForm"
      :searchHandle="searchHandle">
</search-form>

// 查询表单
searchData:{
 name:null,
 age:null,
 sex:null,
 interst:null
},
searchForm:[
 {type:'Input',label:'姓名',prop:'name',width:'180px',placeholder:'请输入姓名...'},
 {type:'Input',label:'年龄',prop:'age',width:'180px',placeholder:'请输入年龄...'},
{type:'Select',label:'别',prop:'sex',width:'180px',options:sexs,props:sexProps,change:row=>'',placeholder:'请选择性别...'},
 {type:'Checkbox',label:'爱好',width:'180px',prop:'interst',checkboxs:intersts,props:interstProps}
],
searchHandle:[
 {label:'查询',type:'primary',handle:()=>''},
 {label:'重置',type:'primary',handle:()=>''}
],

tabel 组件复用

转载文章：VUE整合element-ui table 分页组件_println小强的博客-CSDN博客 

组件代码：

<template>
  <div>
  <el-table :data="tableData"
            :default-sort="{prop:tableProp , order: tableOrder}"
            @sort-change="changes"
            border>
    <el-table-column v-for="(item,key) in tableKey"
                     :key="key"
                     :prop="item.value"
                     :label="item.name"
                     sortable></el-table-column>
  </el-table>
    <el-pagination
      name="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
  </div>
</template>
<script>
  export default{
    name: 'mytable',
    data(){
      return{
        tableData: [],
        currentPage:1,
        pageSize:10,
        tableProp:this.tablep.prop,
        tableOrder:this.tablep.order,
        sort:1,
        total:0
      }
    },
    props:['tableKey','tablep'],
    methods:{
    //table排序触发
      changes({ column, prop, order }){
        this.tableProp = prop;
        this.tableOrder = order;
        if(order !== 'descending'){
            this.sort = 0;
        }else{
            this.sort = 1;
        }
        this.tableChang();
        return false;
      },
      //修改每页条数触发
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        this.tableChang();
      },
      //翻页触发
      handleCurrentChange(val) {
        this.currentPage = val;
        this.tableChang();
      },
      //更新table数据
      tableChang(){
        this.$post(this.tablep.url,{
          pageSize: this.pageSize,
          current: this.currentPage,
          orderBy:this.tableProp,
          sort:this.sort
        }).then(res=>{
          this.total = res.data.total;
          this.tableData = JSON.parse(JSON.stringify(res.data.list));
        })
      }
    }
  }
</script>

使用：

<template>
  <div class="container">
    <sl-table :tableKey="tableKey" :tablep="tablep" ></sl-table>
  </div>
</template>
<script>
  import Table from '@/components/mytable';
  export default {
    data () {
      return {
        tableKey: [{
          name: '用户名',
          value: 'username'
        },{
          name: '密码',
          value: 'password'
        },{
          name: '昵称',
          value: 'othername'
        }],
        tablep:{
          url:'后台数据接口',
          prop:'排序字段',
          order: 'descending' //descending为倒序aescending为正序
        }
      }

    },
    components: {
      'sl-table': Table
    }
  }

</script>