element 可编辑表格

element 可编辑表格(el-form 和 el-table)

使用 element 表格组件（el-table）和表单组件（el-form）构建可编辑表格

页面显示部分

关键属性：:model=“tableForm” ref=“tableForm” :rules="rules"
:data=“tableForm.materiels” // 表格数据显示，关联到 form 表单的 materiels 属性
:prop="‘materiels.’+ scope.$index + ‘.’ + value.prop" :rules="rules[value.prop]"
v-model="scope.row[value.prop]"

// An highlighted block
<el-form :model="tableForm" ref="tableForm" :rules="rules"> // :model 不要写成 v-model
        <el-table
          cell-class-name="margin_padding"
          ref="multipleTable1"
          :data="tableForm.materiels" // 表格数据显示，关联到 form 表单的 materiels 属性
          tooltip-effect="light"
          @selection-change="handleSelectionChange1">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column v-for="(value, index) in table1Header"
            :key="index"
            :label="value.label"> // 这里并没有 prop 属性
            <template slot-scope="scope">
              <el-form-item style="padding-top: 20px" size="mini" :prop="'materiels.'+ scope.$index + '.' + value.prop" :rules="rules[value.prop]">
              // :prop="'materiels.'+ scope.$index + '.' + value.prop" 这里一定要使用 ‘.’ 才能动态关联
                <el-input :disabled="index < 4" size="mini" v-model="scope.row[value.prop]" @blur="change(scope.$index, scope.row)" :placeholder="scope.row.toString()"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

js 部分

关键 this.tableForm.materiels.push(item)

export default {
  name: 'MaterielTable',
  props: ['businessType'],
  data () {
    var validatePass = (rule, value, callback) => {
      console.log(value)
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
    }
    return {
      rules: {
        taxRatio: [
          { required: true, message: '请输入合法数字', trigger: 'blur' }
        ],
        taxPriceTotal: [
          { required: false, pattern: /^([0-9]*(\.[0-9]+)?)$/, message: '请输入合法数字', trigger: 'blur' }
        ],
        balance2: [{ required: false, pattern: /^([0-9]*(\.[0-9]+)?)$/, message: '请输入合法数字', trigger: 'blur' }]
      },
      tableForm: {
        materiels: [
        ]
      },
      multipleSelection1: [], // 多选的表格项
      multipleSelection2: [], // 这是另一个表格的选择数据
      table1Header: [ // 自定义的表格头
        {
          label: '物资编码',
          prop: 'mmCode'
        },
        ...
      ]
    }
  },
  methods: {
    selectMateriel () {
      this.multipleSelection2.forEach((item) => {
        if (this.tableForm.materiels.indexOf(item) === -1) { // 将选择的数据关联到 form 对象数据中，很重要，关系到后面取出表格数据
          this.tableForm.materiels.push(item)
        }
      })
      // 取消表格 2 选择
      this.toggleSelection2()
      // 关闭抽屉
      this.drawer = false
    }
  }
}