专栏首页前端之攻略表格中的输入框验证

表格中的输入框验证

一、首先在表格的外面套一层form,并设置form的model属性

二、在列的模板中增加el-form-item并设置动态的属性和验证规则

<template>
  <div>
    <el-form ref="form" :model="tableForm" :rules="tableForm.rules">
      <el-table :data="tableForm.tableData">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="最小值">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.'+scope.$index+'.min'" :rules="tableForm.rules.min">
              <el-input v-model.number="scope.row.min"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="最大值">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.max`" :rules="tableForm.rules.max">
              <el-input v-model.number="scope.row.max"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableForm: {
        tableData: [
          {
            name: "名称1",
            min: "",
            max: ""
          },
          {
            name: "名称2",
            min: "",
            max: ""
          }
        ],
        rules: {
          min: [
            {
              type: "number",
              required: true,
              min: 1,
              max: 20,
              message: "数值范围1-20",
              trigger: "blur"
            }
          ],
          max: [
            {
              type: "number",
              required: true,
              min: 1,
              max: 20,
              message: "数值范围1-20",
              trigger: "blur"
            }
          ]
        }
      }
    };
  },

  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},

  mounted() {}
};
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Element UI 中 dialog 可拖拽实现方法

    三、在vue页面中使用,给 el-dialog 添加 v-dialogDrag指令

    tianyawhl
  • Element Form表单含有嵌套的数据校验

    tianyawhl
  • Element NavMenu 无限级菜单

    tianyawhl
  • 表格中的输入框验证

    IT茂茂
  • jQuery 写法示例

    Joel
  • Vue使用Element实现增删改查+打包

    在我们进行项目开发期间,避免不了使用各式各样的组件,Element是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。

    憧憬博客
  • 【Vue.js】Vue.js组件库Element的基础用法

    Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,是帮助网站快速成型的工具。

    魏晓蕾
  • vue配合elementUI开发中...( 值与址的问题?)

    但是,数据是在data里构造的,但是业务需求里并不知道表格的数据,只是知道表格的列的内容,即 data里的contents,

    天天_哥
  • SaaS-HRM企业管理

    在src目录下创建文件夹,命名规则:module-模块名称()在文件夹下按照指定的结构配置assets,components,pages,router,stor...

    cwl_java
  • DOM 操作写法示例

    Joel

扫码关注云+社区

领取腾讯云代金券