【无标题】VUE + element 二次封装

form表单封装

<template>
  <!-- form表单封装 yangshuai-->
  <el-form
    ref="ruleForm"
    :model="props.SeachForm"
    :rules="props.rules"
    label-width="120px"
    class="demo-ruleForm"
    style="margin-bottom: 70px"
  >
    <el-row>
      <el-col
        v-for="(item, i) in props.SeachData"
        :span="item.span ? item.span : 8"
        :key="i"
      >
        <el-form-item :label="item.label" :prop="item.prop">
          <!-- input框 -->
          <el-input
            v-if="item.type === 'input'"
            v-model.trim="props.SeachForm[item.prop]"
            :placeholder="`请输入${item.label}`"
            :disabled="item.disabled"
            clearable
            size="mini"
            @blur="item.inputBlur ? item.inputBlur(props.SeachForm[item.prop]) : ''"
          />
          <!-- input数字输入框 -->
          <el-input
            v-if="item.type === 'Numberinput'"
            v-model.trim="props.SeachForm[item.prop]"
            :placeholder="`请输入${item.label}`"
            :disabled="item.disabled"
            clearable
            onkeyup="this.value=this.value.replace(/[^\d]/g,'')"
            size="mini"
            @blur="item.inputBlur ? item.inputBlur(props.SeachForm[item.prop]) : ''"
          />
          <!-- select 框 -->
          <el-select
            v-else-if="item.type === 'select'"
            :label="item.label"
            v-model="props.SeachForm[item.prop]"
            :placeholder="`请选择${item.label}`"
            :disabled="item.disabled"
            clearable
            size="mini"
            filterable
            @change="item.selectChange ? item.selectChange(props.SeachForm[item.prop]) : ''"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            >
              <span style="float: left">{{ option.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                option.value
              }}</span>
            </el-option>
          </el-select>
          <!-- 时间选择 时间选择起期-->
          <el-date-picker
            v-else-if="item.type === 'picker' || item.type === 'pickerstart'"
            v-model="props.SeachForm[item.prop]"
            :placeholder="`请选择${item.label}`"
            :disabled="item.disabled"
            :picker-options="item.pickerOptions"
            clearable
            size="mini"
            value-format="yyyy-MM-dd"
            @change="item.pickerChange ? item.pickerChange(props.SeachForm[item.prop]) : '' "
          />
          <!-- 时间选择 止期-->
          <el-date-picker
            v-else-if="item.type === 'pickerend'"
            v-model="props.SeachForm[item.prop]"
            :placeholder="`请选择${item.label}`"
            :disabled="item.disabled"
            :picker-options="item.pickerOptions"
            clearable
            size="mini"
            value-format="yyyy-MM-dd"
            @change="item.pickerChange ? item.pickerChange(props.SeachForm[item.prop]) : '' "
          />
          <!-- 多选框组 -->
          <el-checkbox-group
            v-if="item.type === 'checkList'"
            v-model="props.SeachForm[item.prop]"
            size="mini"
          >
            <el-checkbox
              v-for="checkbox in item.checkboxs"
              :key="checkbox"
              :label="checkbox"
              :disabled="item.disabled"
            />
          </el-checkbox-group>
          <!-- 单选框组 -->
          <el-radio-group
            v-if="item.type === 'radioList'"
            v-model="props.SeachForm[item.prop]"
            size="mini">
            <el-radio v-for="(item,key) in item.radioLists" :key = "key" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
          <!-- Switch 开关 -->
          <el-switch
            v-if="item.type === 'switch'"
            v-model="props.SeachForm[item.prop]"
            size="mini"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <!-- textarea 输入框 -->
          <el-input
            v-if="item.type === 'textarea'"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="props.SeachForm[item.prop]"
            type="textarea"
            clearable
            size="mini"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div style="float: right">
      <!-- form 提交按钮 -->
      <el-button
        v-for="(item, i) in props.Seachhand"
        v-if="item.type === 'submitbtn'"
        :key="i"
        size="mini"
        type="primary"
        @click="submitForm('ruleForm',item)"
      >{{ item.label }}</el-button
      >
      <!-- form 重置按钮 -->
      <el-button
        v-else-if="item.type === 'resetbtn'"
        size="mini"
        type="primary"
        @click="resetForm('ruleForm')"
      >{{ item.label }}</el-button
      >
      <!-- form 普通按钮 -->
      <el-button
        v-else-if="item.type === 'formbtn'"
        size="mini"
        type="primary"
        @click="item.handCick() ? item.handCick() : '' "
      >{{ item.label }}</el-button
      >
    </div>
  </el-form>
</template>
<script>
export default {
  props: ['props'],
  methods: {
    submitForm(formName, item) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          item.handCick()
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      console.log('重置')
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped>
/deep/.el-select.el-select--mini, /deep/.el-date-editor.el-input {
  width: 100%;
}
/deep/.el-checkbox-group {
  height: 40px;
}
</style>

table表格封装

<template>
  <!-- table表格封装 yangshuai-->
  <div style="margin-bottom: 70px">
    <el-table
      ref="singleTable"
      :data="tableData.Data"
      size="mini"
      highlight-current-row
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="tableData.type === 'radio'" align="center" width="50">
        <template slot-scope="scope">
          <el-radio
            v-model="tableData.currentRow"
            :label="scope.row"
            @change.native="getTemplateRow(scope.row)"
          >&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column v-if="tableData.type === 'selection'" align="center" type="selection" width="55"/>
      <el-table-column :index="index" align="center" label="序号" type="index" width="50"/>
      <el-table-column
        v-for="(item,key) in tableData.row"
        :prop = "item.prop"
        :label = "item.label"
        :width = "item.width"
        :key = "key"
        show-overflow-tooltip
        align="center">
        <template slot-scope="scope">
          <div v-if="!item.type">
            {{ scope.row[item.prop] }}
          </div>
          <div v-if="item.type === 'select'">
            <el-select v-model="scope.row[item.prop]" clearable size="mini" placeholder="请选择">
              <el-option
                v-for="(item,key) in item.options"
                :key = "key"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </div>
          <div v-if="item.type === 'input'">
            <el-input v-model="scope.row[item.prop]" clearable size="mini" placeholder="请输入内容"/>
          </div>
          <div v-if="item.type === 'DatePicker'">
            <el-date-picker
              v-model="scope.row[item.prop]"
              clearable
              size="mini"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"/>
          </div>
          <!-- 操作按钮 -->
          <div v-if="item.type === 'btn'">
            <el-button
              v-for="(item,key) in item.btnList"
              :key = "key"
              :type = "item.type"
              size="mini"
              @click="item.handCick ? item.handCick(scope.row) : '' ">{{ item.name }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 20px;float: right;">
      <el-pagination
        :current-page="pageInfo.page"
        :page-sizes="[5, 10, 20, 30,50]"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        small
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script>
export default {
  props: ['tableData', 'pageInfo'],
  data() {
    return {
    }
  },
  methods: {
    // 单选
    getTemplateRow(val) {
      this.$emit('getTemplateRow', val)
    },
    // 多选
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    index(index) {
      return index + 1 + (this.pageInfo.page - 1) * this.pageInfo.pageSize //  page 页数  pagesize 每页条数
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.$emit('handleChange')
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val
      this.$emit('handleChange')
    }
  }
}
</script>

demo

<template>
  <!-- form、able Demo yangshuai-->
  <div class="app-container">
    <Form :props="props"/>
    <Table :tableData="tableData" :pageInfo="pageInfo" @handleChange = "handleChange" @getTemplateRow = "getTemplateRow"/>
    <Table :tableData="tableData1" :pageInfo="pageInfo1" @handleChange = "handleChange1" @handleSelectionChange = "handleSelectionChange"/>
  </div>
</template>

<script>
import Form from './form'
import Table from './table'

export default {
  components: { Form, Table },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      if (value < 18) {
        callback(new Error('必须年满18岁'))
      } else {
        callback()
      }
    }
    return {
      props: {
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date: [
            {
              type: 'date',
              required: true,
              message: '请选择日期',
              trigger: 'change'
            }
          ],
          validate: [
            {
              required: true,
              validator: checkAge,
              trigger: 'blur'
            }
          ]
        },
        SeachForm: {
          name: '',
          validate: '',
          region: '',
          date: '',
          checkList: ['上海'],
          checkList2: ['北京'],
          startdate: '',
          enddate: '',
          switch: true,
          radioList: '0',
          textarea: '',
          nameNumber: ''
        },
        SeachData: [
          {
            type: 'input',
            label: '活动名称',
            prop: 'name',
            inputBlur: (val) => {
              console.log(val + 'input+inputblur')
            }
          },
          {
            type: 'Numberinput',
            label: '只能输入数字',
            prop: 'nameNumber',
            inputBlur: (val) => {
              console.log(val + 'nameNumber+inputblur')
            }
          },
          {
            type: 'select',
            label: '活动区域',
            prop: 'region',
            options: [
              {
                value: '选项1',
                label: '黄金糕'
              },
              {
                value: '选项2',
                label: '双皮奶'
              },
              {
                value: '选项3',
                label: '蚵仔煎'
              },
              {
                value: '选项4',
                label: '龙须面'
              },
              {
                value: '选项5',
                label: '北京烤鸭'
              }
            ],
            selectChange: (val) => {
              console.log(val + 'change')
            }
          },
          {
            type: 'picker',
            label: '活动时间',
            prop: 'date',
            pickerChange: (val) => {
              console.log(val)
            }
          },
          {
            type: 'pickerstart',
            label: '活动起始时间',
            prop: 'startdate',
            pickerOptions: {
              disabledDate: (time) => {
                const enddate = this.props.SeachForm.enddate
                if (enddate) {
                  return time.getTime() < new Date().getTime() || time.getTime() > new Date(enddate).getTime()
                }
              }
            },
            pickerChange: (val) => {
              console.log(val)
            }
          },
          {
            type: 'pickerend',
            label: '活动结束时间',
            prop: 'enddate',
            pickerOptions: {
              disabledDate: (time) => {
                const startdate = this.props.SeachForm.startdate
                if (startdate) {
                  return (
                    time.getTime() > Date.now() ||
                    new Date(startdate).getTime() > time.getTime()
                  )
                }
              }
            },
            pickerChange: (val) => {
              console.log(val)
            }
          },
          {
            type: 'checkList',
            label: '多选框组',
            prop: 'checkList',
            disabled: false,
            checkboxs: ['上海', '北京']
          },
          {
            type: 'radioList',
            label: '单选框组',
            prop: 'radioList',
            disabled: false,
            radioLists: [{
              value: '0',
              label: '男'
            },
            {
              value: '1',
              label: '女'
            }]
          },
          {
            type: 'switch',
            label: '活动时间开启',
            prop: 'switch'
          },
          {
            type: 'input',
            label: '自定义校验',
            prop: 'validate'
          },
          {
            type: 'textarea',
            label: '活动时间描述',
            prop: 'textarea',
            span: 24
          }
        ],
        Seachhand: [
          {
            type: 'submitbtn',
            label: '提交',
            handCick: () => {
              console.log('提交', this.props.SeachForm)
            }
          },
          {
            type: 'resetbtn',
            label: '重置'
          },
          {
            type: 'formbtn',
            label: '返回',
            handCick: () => {
              this.goback()
            }
          }
        ]
      },
      tableData: {
        row: [
          {
            label: '日期',
            prop: 'date',
            width: 180
          },
          {
            label: '地址',
            prop: 'address',
            width: 180
          },
          {
            label: '姓名',
            prop: 'name',
            width: 180
          },
          {
            type: 'select',
            label: '选择',
            prop: 'select',
            options: [{
              value: '01',
              label: '黄金糕'
            }, {
              value: '02',
              label: '双皮奶'
            }, {
              value: '03',
              label: '蚵仔煎'
            }, {
              value: '04',
              label: '龙须面'
            }, {
              value: '05',
              label: '北京烤鸭'
            }],
            width: 180
          },
          {
            label: '输入框',
            prop: 'input',
            type: 'input',
            width: 180
          },
          {
            label: '日期选择器',
            prop: 'DatePicker',
            type: 'DatePicker',
            width: 180
          },
          {
            label: '操作',
            type: 'btn',
            width: 180,
            btnList: [{
              name: '编辑',
              type: 'success',
              handCick: (val) => {
                console.log(val)
              }
            },
            {
              name: '删除',
              type: 'danger',
              handCick: (val) => {
                console.log(val)
              }
            }]
          }
        ],
        type: 'radio',
        currentRow: '',
        Data: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          select: '01',
          input: '1231',
          DatePicker: ''
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          select: '02'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          select: '03'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          select: '04'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          select: '01',
          input: '1231',
          DatePicker: ''
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          select: '02'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          select: '03'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          select: '04'
        }]
      },
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      tableData1: {
        row: [
          {
            label: '日期',
            prop: 'date',
            width: 180
          },
          {
            label: '地址',
            prop: 'address',
            width: 180
          },
          {
            label: '姓名',
            prop: 'name',
            width: 180
          },
          {
            type: 'select',
            label: '选择',
            prop: 'select',
            options: [{
              value: '01',
              label: '黄金糕'
            }, {
              value: '02',
              label: '双皮奶'
            }, {
              value: '03',
              label: '蚵仔煎'
            }, {
              value: '04',
              label: '龙须面'
            }, {
              value: '05',
              label: '北京烤鸭'
            }],
            width: 180
          },
          {
            label: '输入框',
            prop: 'input',
            type: 'input',
            width: 180
          },
          {
            label: '日期选择器',
            prop: 'DatePicker',
            type: 'DatePicker',
            width: 180
          },
          {
            label: '操作',
            type: 'btn',
            width: 180,
            btnList: [{
              name: '编辑',
              type: 'success',
              handCick: (val) => {
                console.log(val)
              }
            },
            {
              name: '删除',
              type: 'danger',
              handCick: (val) => {
                console.log(val)
              }
            }]
          }
        ],
        type: 'selection',
        currentRow: [],
        Data: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          select: '01',
          input: '1231',
          DatePicker: ''
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          select: '02'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          select: '03'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          select: '04'
        }]
      },
      pageInfo1: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    // 返回
    goback() {
      console.log('goback')
    },
    // 分页
    handleChange() {
      console.log(this.pageInfo)
    },
    // 分页1
    handleChange1() {
      console.log(this.pageInfo1)
    },
    // 单选
    getTemplateRow(val) {
      this.tableData.currentRow = val
      console.log(val)
    },
    // 多选
    handleSelectionChange(val) {
      this.tableData1.currentRow = val
      console.log(val)
    }
  }
}
</script>