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

搬砖的小白

已于 2023-01-17 09:23:35 修改

阅读量3.6k

点赞数 1

分类专栏： element-ui使用心得文章标签： vue

于 2020-06-23 16:07:49 首次发布

本文链接：https://blog.csdn.net/weixin_43805439/article/details/106925770

版权

element-ui使用心得专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <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>

在这里插入图片描述

搬砖的小白

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
element-ui table表格行内编辑加校验

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js">&lt
复制链接

扫一扫