内容包含：校验。下拉框。输入框。日期控件

效果图

 

1.代码目录

2.index.js

import SjjEditable from './src/editable.vue'
// import Vue from 'vue'

SjjEditable.install = function (Vue) {
  Vue.component(SjjEditable.name, SjjEditable)
}

export default SjjEditable

 3.utilsjs

export const getRowIndetity = (row, rowKey) => {
  if (!row) throw new Error('row is required when get row identity')
  if (typeof rowKey === 'string') {
    if (rowKey.indexOf('.') < 0) {
      return row[rowKey]
    }
    let key = rowKey.split('.')
    let current = row
    for (let i = 0; i < key.length; i++) {
      current = current[key[i]]
    }
    return current
  } else if (typeof rowKey === 'function') {
    return rowKey.bind(null, row)
  }
}

4.editable-column.vue

<template>
  <el-table-column v-if="isIndexTypeColumn(type)" :prop="prop" :type="type" :label="label" :width="width" :min-width="minWidth"/>

  <el-table-column v-else :prop="prop" :type="type" :label="label" :width="width" :min-width="minWidth" >
    <template slot-scope="scope">
      <el-form v-if="type && editing && editing[scope.$index] && editing[scope.$index][prop]" :model="scope.row" :rules="rules" @validate="handleValidate" :ref="`form_${scope.$index}_${prop}`">
        <el-form-item :prop="type === 'select' ? prop.replace(/(\_*)(text|txt)/ig, '') : prop" class="el-editable-form-item">
          <el-input autofocus v-if="type === 'text' || type === 'textarea'" :type="type" v-model="scope.row[prop]" class="el-editable-element" @change="handleChange"/>
          <el-date-picker v-else-if="type === 'date' || type === 'datetime'" v-model="scope.row[prop]" :type="type" class="el-editable-element" @change="handleChange" :format="format" :value-format="valueFormat"/>
          <el-select v-else-if="type === 'select'" v-model="scope.row[prop.replace(/(\_*)(text|txt)/ig, '')]" class="el-editable-element" @change="handleChange">
            <el-option v-for="(o,i) in options" :key="i" :value="o.value" :label="o.label || o.text" :disabled="o.disabled ? true:false"/>
          </el-select>
          <sjj-currency v-else-if="type === 'currency'" v-model="scope.row[prop]" class="el-editable-element" @change="handleChange"/>
        </el-form-item>
      </el-form>
      <div v-else :class="editedCell&&editedCell[scope.$index]&&editedCell[scope.$index][prop] ? 'is-edited' : ''">{
  { scope.row[prop] }}</div>
    </template>
  </el-table-column>
</template>

<script>
import sjjCurrency from '../../currency/index.js'
import merge from 'element-ui/src/utils/merge'
import { getRowIndetity } from './utils.js'
export default {
  name: 'SjjEditableColumn',
  props: {
    type: {
      type: String,
      default: ''
    },
    label: String,
    className: String,
    labelClassName: String,
    prop: String,
    width: {},
    minWidth: {},
    index: [Number, Function],
    options: Array,
    format: { // 显示在输入框中的格式，默认为yyyy-MM-dd
      type: String,
      default: 'yyyy-MM-dd'
    },
    valueFormat: { // 绑定值得格式，默认为yyyy-MM-dd
      type: String,
      default: 'yyyy-MM-dd'
    }
  },
  components: {
    sjjCurrency
  },
  data () {
    return {
      validates: false,
      editedCell: {}, // 编辑成功过的cell们
      validatedRow: {}, // 已编辑的行
      validated: {} // 已编辑的cell
    }
  },
  mounted () {
    thi