后台表单验证 +表格获取当前行的数据

表单验证是我们经常用到的东西，今天来看一下表单验证的实现。

<template>
  <div class="">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item prop="name" label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item prop="age" label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: right">
      <el-button type="primary" @click="submit">确定 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        age: "",
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: "change" }],
        age: [{ required: true, message: "必填", trigger: "change" }],
      },
    };
  },
  name: "",
  methods: {
    submit() {
      this.$refs.form.validate((result) => {
        if (result) {
          this.$message.success("提交成功");
        }
      });
    },
  },
};
</script>

<style scoped></style>

:model 是要绑定的数据。

:rules  表单的验证

ref     为全局的表单验证做准备

l

 label:标题

 prop:关联的是当前行的数据

我们看一下视图结果:

 

 在点击按钮后是一个全局的表单验证。

代码：

   this.$refs.form.validate((result) => {
        if (result) {
          this.$message.success("提交成功");
        }
      });

解析:result 返回的是一个布尔值,如果是true代表全局验证成功。这里是通过refs来获取组件的实例化对象。

this.$refs获取的是什么呢？

        1. 如果是一个组件的话获取的是组件的实例化对象

        2. 如果是一个标签则获取的是当前的DOM

我们在这里获取的是Element--ui里面的实例化对象。

     console.log(this.$refs.form, "实例化对象");

可以看到el-form里面还有很多的方法，我们只是调用这个实例化对象里面的全局表单验证。

通过作用域插槽来获取当前行的数据    

1.表格获取当前的数据

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <!-- 自定义插槽 -->
    <el-table-column>
      <template v-slot="row">
        <div>
          <el-button type="danger" @click="fn(row)"
            >删除{{ row.date }}</el-button
          >
          <el-button type="success" @click="add(row)"
            >添加{{ row.name }}</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "蔡志鹏",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "湖北省",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    fn(row) {
      console.log(row.row.address);
      console.log(row.row.date);
      console.log(row.row.name);
    },
    add(row) {
      console.log(row.$index);
    },
  },
};
</script>

   

可以看到当前行的数据已经被获取到了。

2.通过作用域插槽自定义序号一列

代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="索引" width="180">
      <template v-slot="row">
        <div>
          <span> {{ row.$index + 1 }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <!-- 自定义插槽 -->
    <el-table-column label="操作" width="180">
      <template v-slot="row">
        <div>
          <el-button type="danger" @click="fn(row)"
            >删除{{ row.date }}</el-button
          >
          <el-button type="success" @click="add(row)"
            >添加{{ row.name }}</el-button
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "蔡志鹏",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "湖北省",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    fn(row) {
      console.log(row.row.address);
      console.log(row.row.date);
      console.log(row.row.name);
    },
    add(row) {
      console.log(row.$index);
    },
  },
};
</script>

view视图：

 

上面讲了表格表单能不能获取数据呢？

<template>
  <div class="">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <template slot-scope="scope">
          <div>
            <el-button @click="fn(scope)">传递当前行的数据</el-button>
          </div>
        </template>
        <el-input v-model="form.age"> </el-input>
      </el-form-item>
    </el-form>
    <el-button @click="submit" type="success" style="text-algin;center"
      >登录验证</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        age: "",
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: "change" }],
        age: [{ required: true, message: "必填", trigger: "change" }],
      },
    };
  },
  name: "",
  methods: {
    submit() {
      this.$refs.form.validate((result) => {
        if (result) {
          this.$message.success("验证成功");
        }
      });
    },
    fn(row) {
      console.log(row.row);
    },
  },
};
</script>

<style scoped></style>

打开element-ui表单的官网可以看到

并没有看到能传递当前行的作用域插槽。