vue+element-ui表格行内编辑加校验


<html>

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/vue">script>
  <script src="https://unpkg.com/element-ui/lib/index.js">script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
head>

<body>
  <div id="app">
    <el-form ref="tableFrom" :model="tableFrom" :rules="tableFromRules">
      <el-table :data="tableFrom.tableData" style="width: 100%;">
        <el-table-column label="ID" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.id'" :rules="tableFromRules.id">
              <el-input v-model="scope.row.id">el-input>
            el-form-item>
          template>
        el-table-column>
        <el-table-column label="name" min-width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="tableFromRules.name">
              <el-input v-model="scope.row.name">el-input>
            el-form-item>
          template>
        el-table-column>
        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <el-button type="text" @click="insert(scope.$index)">插入当前行el-button>
            <el-button type="text" @click="del(scope.$index)">删除el-button>
          template>
        el-table-column>
      el-table>
      <el-button type="success" icon="el-icon-plus" plain style="margin-top: 10px; width: 100%;" @click="add()">添加
      el-button>
    el-form>
  div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        tableFrom: {
          tableData: []
        },
        tableFromRules: {
          id: [{
            required: true,
            message: '请输入id',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入name',
            trigger: 'blur'
          }]
        }
      },
      mounted() {},
      methods: {
        add() {
          this.tableFrom.tableData.push({
            id: '',
            name: ''
          })
        },
        insert(index) {
          this.tableFrom.tableData.splice(index, 0, {
            id: '',
            name: ''
          })
        },
        del(index) {
          this.tableFrom.tableData.splice(index, 1)
        }
      }
    })
  script>
body>

html>

在这里插入图片描述

你可能感兴趣的:(vue,element-ui)