΢ Ͷ ^ ھ

cba广州队赛程 :vue elementui FڹMbČa

cba㶫 www.axwwg.com  •rg2020-01-26 01:01:06   ߣ   ҪuՓ(0)

1
vue_ϵyкܶϷһЩxֱʹel-tableڅ^ÿΌܷҶ_lrÿˌ

1

vue_ϵyкܶϷһЩxֱʹel-tableڅ^ÿΌܷҶ_lrÿˌĘʽͬ֘ʽoyһ

Ҫ]һbyһ_lSoЧʺͽyһ

ɺЧžL@ӣ

2

Ŀʹõelementui@NύҪʹel-formMbscDZ헿кܶNinputݔselectxڕrgxڕrgxcascader“xÿһ헵ֶpropQlabelČԷMͬԲͨ^ͨĽeԵķʽ̎slot۵ķʽҲoKQͨ^fһ헔MʽĽY

3F

ĿǰFķʽɃɲֽMһformνMܸMf헔MһǷbһЩõı헽Mͨ^v-ifformνMԓ헽Mѭhvfı́ƥ@ʾwı

formνMsearchForm.vueʾa

<el-form
 :model="formData"
 ref="formRef"
 :inline="true"
>
 <el-form-item
 v-for="(item, index) in formOptions"
 :key="newKeys[index]"
 :prop="item.prop"
 :label="item.label ? (item.label + '') : ''"
 :rules="item.rules"
 >
 <formItem
  v-model="formData[item.prop]"
  :itemOptions="item"
 />
 </el-form-item>
</el-form>

formItem헽MformItem.vueʾa

<el-input
 v-if="isInput"
 v-model="currentVal"
 v-bind="bindProps"
 v-on="bindEvents"
 size="mini"
></el-input>

<el-select
 v-if="isSelect"
 v-model="currentVal"
 v-bind="bindProps"
 v-on="bindEvents"
 size="mini"
 clearable
 >
 <el-option
 v-for="item in itemOptions.options"
 :key="item.value"
 :label="item.label"
 :value="item.value"
 ></el-option>
</el-select>

4PIc

elementuiνMкܶÌܰеČԺͷbҪop֧Ҫõvuev-bindv-onvuev-bindv-on֧xֵ錦vueԄӱvČνv2.4.0+֧

5헽


[{
 label: 'Ñ', // label
 prop: 'username', // ֶ
 element: 'el-input', // ָelementuiM
 initValue: 'S', // ֶγʼֵ
 placeholder: 'ՈݔÑ', // elementuiM
 rules: [{ required: true, message: '', trigger: 'blur' }], // elementuiM
 events: { // elementuiM
 input (val) {
 console.log(val)
 },
 }
}]

label ڽoel-form-itemϵlabel험}
prop ڽoel-form-itemϵpropֶ
element ָelementui헵ĽM
initValue 헵ijʼֵx
events ӷjsԭelementui헽Mֵ֧ķԼMȥͨ^v-onv
elementui헽Mֵ֧ČԻhtmlԭԶõrulesУplaceholderʾͨ^v-bindv

2f̣

searchForm.vueMͨ^propsՅ

formOptions: {
 type: Array,
 required: true,
 default () {
 return []
 }
},

createdM̎ʼֵ

// ӳʼֵ
addInitValue () {
 const obj = {}
 this.formOptions.forEach(v => {
 if (v.initValue !== undefined) {
  obj[v.prop] = v.initValue
 }
 })
 this.formData = obj
}

һ헽el-form-itemһւfoformItem헽Mٽ

<el-form-item
 v-for="(item, index) in formOptions"
 :key="newKeys[index]"
 :prop="item.prop"
 :label="item.label ? (item.label + '') : ''"
 :rules="item.rules"
>
 <formItem
 v-model="formData[item.prop]"
 :itemOptions="item"
 />
</el-form-item>

formItem.vue헽Mprops܂

itemOptions: {
 type: Object,
 default () {
 return {}
 }
}

computed̎յąitemOptionsҪЌԌbindProps

// 
bindProps () {
 let obj = { ...this.itemOptions }
 // ƳʹõĻP
 delete obj.label
 delete obj.prop
 delete obj.element
 delete obj.initValue
 delete obj.rules
 delete obj.events
 if (obj.element === 'el-select') {
 delete obj.options
 }
 return obj
},

computedҪзbindEvents

// 
bindEvents () {
 return this.itemOptions.events || {}
},

domʹ@Щ

<el-input
 v-if="isInput"
 v-model="currentVal"
 v-bind="bindProps"
 v-on="bindEvents"
></el-input>

3r̎

elementuiel-selectͨ^el-optionvFvMoptionselementuiٷǽel-selectϵᘌel-selectټһoptionsselectx헵ĔM

<el-select
 v-if="isSelect"
 v-model="currentVal"
 v-bind="bindProps"
 v-on="bindEvents"
 size="mini"
 clearable
>
 <el-option
 v-for="item in itemOptions.options"
 :key="item.value"
 :label="item.label"
 :value="item.value"
 ></el-option>
</el-select>

elementuiڕrgx˺ܶNIҪքe̎һ@ǸtypeֳN_̎õdatetimerangeڕrgxĬJ߀һNmonthrangeĶһNw̎Ҋĩβa

6oM

o䌍ôׂ]Ҫ̫ķbIЩoͷbMȥĿǰ@ͷbo
ͨ^propsһַRoM

// ύoöָ̖query, export, resetã
btnItems: {
 type: String,
 default () {
 return 'search'
 }
}

7ʹ÷ʽʾ

dom:

<!--  -->
<searchForm :formOptions="formOptions" @onSearch="onSearch"/>

vue data:

formOptions: [
 {
 label: 'Ҋ',
 prop: 'content',
 element: 'el-input'
 },
 {
 label: '',
 prop: 'type',
 element: 'el-select',
 options: [
  { label: 'ocҊ', value: '1' },
  { label: 'ۺ}', value: '2' }
 ]
 },
 {
 label: 'B',
 prop: 'status',
 element: 'el-select',
 options: getFeedbackStatus()
 },
 {
 label: 'ύrg',
 prop: 'timeRange',
 element: 'el-date-picker'
 }
],

vue methods:

// @ȡύĔ
onSearch (val) {
 console.log(val)
}

8a

1searchForm.vue

/**
 * Created by hanxueqiang on 200107
 *
 * ڹM
 */
<template>
 <div class="search-form-box">
 <el-form
  :model="formData"
  ref="formRef"
  :inline="true"
 >
  <el-form-item
  v-for="(item, index) in formOptions"
  :key="newKeys[index]"
  :prop="item.prop"
  :label="item.label ? (item.label + '') : ''"
  :rules="item.rules"
  >
  <formItem
   v-model="formData[item.prop]"
   :itemOptions="item"
  />
  </el-form-item>
 </el-form>

 <!-- ύo -->
 <div class="btn-box">
  <el-button
  v-if="btnItems.includes('search')"
  size="mini"
  type="primary"
  class="btn-search"
  @click="onSearch"
  ></el-button>

  <el-button
  v-if="btnItems.includes('export')"
  size="mini"
  type="primary"
  class="btn-export"
  @click="onExport"
  ></el-button>

  <el-button
  v-if="btnItems.includes('reset')"
  size="mini"
  type="default"
  class="btn-reset"
  @click="onReset"
  ></el-button>
 </div>
 </div>
</template>

<script>
import formItem from './formItem'
import tools from '@/utils/tools'

export default {
 props: {
 /**
  * 
  * ʾ
  * [{
  * label: 'Ñ', // label
  * prop: 'username', // ֶ
  * element: 'el-input', // ָelementuiM
  * initValue: 'S', // ֶγʼֵ
  * placeholder: 'ՈݔÑ', // elementuiM
  * rules: [{ required: true, message: '', trigger: 'blur' }], // elementuiM
  * events: { // elementuiM
  *  input (val) {
  *  console.log(val)
  *  },
  *  ...... // elementuiMֵ֧ķ
  * }
  * ...... // elementuiMֵ֧Č
  * }]
  */
 formOptions: {
  type: Array,
  required: true,
  default () {
  return []
  }
 },
 // ύoöָ̖query, export, reset
 btnItems: {
  type: String,
  default () {
  return 'search'
  }
 }
 },

 data () {
 return {
  formData: {}
 }
 },

 computed: {
 newKeys () {
  return this.formOptions.map(v => {
  return tools.createUniqueString()
  })
 }
 },

 created () {
 this.addInitValue()
 },

 methods: {
 // У
 onValidate (callback) {
  this.$refs.formRef.validate(valid => {
  if (valid) {
   console.log('ύɹ')
   console.log(this.formData)
   callback()
  }
  })
 },
 // 
 onSearch () {
  this.onValidate(() => {
  this.$emit('onSearch', this.formData)
  })
 },
 // 
 onExport () {
  this.onValidate(() => {
  this.$emit('onExport', this.formData)
  })
 },
 onReset () {
  this.$refs.formRef.resetFields()
 },
 // ӳʼֵ
 addInitValue () {
  const obj = {}
  this.formOptions.forEach(v => {
  if (v.initValue !== undefined) {
   obj[v.prop] = v.initValue
  }
  })
  this.formData = obj
 }
 },

 components: { formItem }
}
</script>

<style lang='less' scoped>
.search-form-box {
 display: flex;
 margin-bottom: 15px;

 .btn-box {
 padding-top: 5px;
 display: flex;

 button {
  height: 28px;
 }
 }
 .el-form {
 /deep/ .el-form-item__label {
  padding-right: 0;
 }
 .el-form-item {
  margin-bottom: 0;

  &.is-error {
  margin-bottom: 22px;
  }
 }
 // el-input
 /deep/ .form-item {
  > .el-input:not(.el-date-editor) {
  width: 120px;
  }
 }
 /deep/ .el-select {
  width: 120px;
 }
 /deep/ .el-cascader {
  width: 200px;
 }
 }
}

</style>

2formItem.vue

/**
 * Created by hanxueqiang on 200107
 *
 * ƥ
 */
<template>
 <div class='form-item'>
 <el-input
  v-if="isInput"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  size="mini"
 ></el-input>

 <el-input-number
  v-if="isInputNumber"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  :controls-position="itemOptions['controls-position'] || 'right'"
  size="mini"
 ></el-input-number>

 <el-select
  v-if="isSelect"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  size="mini"
  clearable
  >
  <el-option
  v-for="item in itemOptions.options"
  :key="item.value"
  :label="item.label"
  :value="item.value"
  ></el-option>
 </el-select>

 <!-- datetimerange/daterange -->
 <el-date-picker
  v-if="isDatePickerDateRange"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  :type="itemOptions.type || 'datetimerange'"
  size="mini"
  clearable
  :picker-options="pickerOptionsRange"
  start-placeholder="_ʼ"
  range-separator=""
  end-placeholder="Y"
  :default-time="['00:00:00', '23:59:59']"
  value-format="yyyy-MM-dd HH:mm:ss"
 ></el-date-picker>

 <!-- monthrange -->
 <el-date-picker
  v-if="isDatePickerMonthRange"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  type="monthrange"
  size="mini"
  clearable
  :picker-options="pickerOptionsRangeMonth"
  start-placeholder="_ʼ"
  range-separator=""
  end-placeholder="Y"
  value-format="yyyy-MM"
 ></el-date-picker>

 <!-- others -->
 <el-date-picker
  v-if="isDatePickerOthers"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  :type="itemOptions.type"
  size="mini"
  clearable
  placeholder="Ոx"
 ></el-date-picker>

 <el-cascader
  v-if="isCascader"
  v-model="currentVal"
  v-bind="bindProps"
  v-on="bindEvents"
  size="mini"
  clearable
 ></el-cascader>
 </div>
</template>

<script>
import tools from '@/utils/tools'

export default {
 inheritAttrs: false,

 props: {
 value: {},
 itemOptions: {
  type: Object,
  default () {
  return {}
  }
 }
 },

 data () {
 return {
  pickerOptionsRange: tools.pickerOptionsRange,
  pickerOptionsRangeMonth: tools.pickerOptionsRangeMonth
 }
 },

 computed: {
 // p򽉶ֵ
 currentVal: {
  get () {
  return this.value
  },
  set (val) {
  this.$emit('input', val)
  }
 },
 // 
 bindProps () {
  let obj = { ...this.itemOptions }
  // Ƴ
  delete obj.label
  delete obj.prop
  delete obj.element
  delete obj.initValue
  delete obj.rules
  delete obj.events
  if (obj.element === 'el-select') {
  delete obj.options
  }
  return obj
 },
 // 
 bindEvents () {
  return this.itemOptions.events || {}
 },
 // el-input
 isInput () {
  return this.itemOptions.element === 'el-input'
 },
 // el-input-number
 isInputNumber () {
  return this.itemOptions.element === 'el-input-number'
 },
 // el-select
 isSelect () {
  return this.itemOptions.element === 'el-select'
 },
 // el-date-picker (type: datetimerange/daterange)
 isDatePickerDateRange () {
  const isDatePicker = this.itemOptions.element === 'el-date-picker'
  const isDateRange = !this.itemOptions.type ||
  this.itemOptions.type === 'datetimerange' ||
  this.itemOptions.type === 'daterange'
  return isDatePicker && isDateRange
 },
 // el-date-picker (type: monthrange)
 isDatePickerMonthRange () {
  const isDatePicker = this.itemOptions.element === 'el-date-picker'
  const isMonthRange = this.itemOptions.type === 'monthrange'
  return isDatePicker && isMonthRange
 },
 // el-date-picker (type: other)
 isDatePickerOthers () {
  const isDatePicker = this.itemOptions.element === 'el-date-picker'
  return isDatePicker && !this.isDatePickerDateRange && !this.isDatePickerMonthRange
 },
 // el-cascader
 isCascader () {
  return this.itemOptions.element === 'el-cascader'
 }
 },

 created () {},

 methods: {},

 components: {}
}
</script>

<style lang='less' scoped>

</style>

3هһЩ tools.js

/**
 * Ψһַ
 * @return {string} ojgdvbvaua40
 */
function createUniqueString () {
 const timestamp = +new Date() + ''
 const randomNum = parseInt((1 + Math.random()) * 65536) + ''
 return (+(randomNum + timestamp)).toString(32)
}

// elementuiڕrg x
const pickerOptionsRange = {
 shortcuts: [
 {
  text: '',
  onClick (picker) {
  const end = new Date()
  const start = new Date(new Date().toDateString())
  start.setTime(start.getTime())
  picker.$emit('pick', [start, end])
  }
 }, {
  text: 'һ',
  onClick (picker) {
  const end = new Date()
  const start = new Date()
  start.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
  picker.$emit('pick', [start, end])
  }
 }, {
  text: 'һ',
  onClick (picker) {
  const end = new Date()
  const start = new Date()
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
  picker.$emit('pick', [start, end])
  }
 }, {
  text: '',
  onClick (picker) {
  const end = new Date()
  const start = new Date()
  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
  picker.$emit('pick', [start, end])
  }
 }
 ]
}

// elementui·ݷ x
const pickerOptionsRangeMonth = {
 shortcuts: [
 {
  text: '',
  onClick (picker) {
  const end = new Date()
  const start = new Date(new Date().getFullYear(), 0)
  picker.$emit('pick', [start, end])
  }
 },
 {
  text: '',
  onClick (picker) {
  const end = new Date()
  const start = new Date()
  start.setMonth(start.getMonth() - 6)
  picker.$emit('pick', [start, end])
  }
 },
 {
  text: 'һ',
  onClick (picker) {
  const end = new Date()
  const start = new Date()
  start.setMonth(start.getMonth() - 12)
  picker.$emit('pick', [start, end])
  }
 }
 ]
}

4һЩelmentuiȫ֘ʽ޸

// el-input-number (controls-position="right")
.el-input-number.is-controls-right {
 .el-input-number__decrease {
 display: none;
 }
 .el-input-number__increase {
 display: none;
 top: 2px; // fix style bug
 }
 &:hover {
 .el-input-number__decrease {
  display: inline-block;
 }
 .el-input-number__increase {
  display: inline-block;
 }
 }
 .el-input__inner {
 text-align: left;
 padding-left: 5px;
 padding-right: 40px;
 }
}

// el-date-picker datetimerange
.el-date-editor.el-date-editor--datetimerange {
 .el-range-separator {
 width: 24px;
 color: #999;
 padding: 0;
 }
 .el-range__icon {
 margin-left: 0;
 }
 &.el-input__inner {
 vertical-align: middle;
 padding: 3px 5px;
 }
 &.el-range-editor--medium {
 width: 380px;

 .el-range-separator {
  line-height: 30px;
 }
 }
 &.el-range-editor--mini {
 width: 330px;

 .el-range-separator {
  line-height: 22px;
 }
 }
}

// el-date-picker not datetimerange
.el-date-editor {
 .el-input__prefix {
 left: 0;
 top: 1px;
 }
 .el-input__suffix {
 right: 0;
 top: 1px;
 }
 .el-input__inner {
 padding: 0 25px;
 }
 &.el-input--mini {
 width: 175px;
 }
 &.el-input--medium {
 width: 195px;
 }
}

// input padding
.el-input__inner {
 padding: 0 5px;
}

Y

СoҽBvue elementui FڹMbϣκɆՈoСr؏ʹҵڴҲdzxҌ_֮ҾWվ֧

XñČЎgӭDdՈע̎xx

ܸdȤ:

  • elementUi vue el-radio O x׃Ča
  • vue+elementUI sεCύ}
  • vue elementUIʹtabsc“
  • vue elementui el-form rulesӑBCČaԔ
  • vue elementUI table Զx^кϲČa
  • vue elementUI table񔵓 LӑмdČF
  • VUE2.0+ElementUI2.0el-tableѭhӑBȾČԔ
  • VUE2.0 ElementUI2.0el-tablem߶ȵČF

P