Element-UI组件的简单使用（form表单和table表格）-一一网

1、表单

表单常用来用户注册登录等提交数据

1.1表单绑定数据

<el-form :model="form" :rules="rules">
    <el-form-item label="用户名">
    	<el-input v-model="form.username"></el-input>
    </el-form-item>
</el-form>
复制代码
复制代码

data中的数据form应该这样写

form:{
    username:'',
    password:'',
    }
复制代码
复制代码

1.2给表单添加验证规则注意prop是写在`el-form-item`中

<el-form  :rules="rules">
    <el-form-item label="用户名" prop="name">  //name是rules里面设定的规则
    	<el-input v-model="form.username"></el-input>
    </el-form-item>
</el-form>
复制代码
复制代码

data中的数据这样写

 rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
      },
复制代码
复制代码

1.3通常在表单提交之前会进行表单的预校验

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名">
    	<el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm">立即创建</el-button>
    </el-form-item>
</el-form>
<script>
  export default {
      methods:{
           submitForm(){
               this.$refs.form.validate(valid=>{
               if(valid) this.$message.success('提交成功')
               })
              }
            }  
      }
复制代码
复制代码

1.4表单的重置

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名">
    	<el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="resetForm">立即创建</el-button>
    </el-form-item>
</el-form>
<script>
  export default {
      methods:{
           resetForm() {
                this.$refs.form.resetFields();
              }
            }  
      }
复制代码
复制代码

1.5自定义表单验证规则

<el-form  :rules="rules" ref="ruleForm" label-width="100px" >
  <el-form-item label="密码" prop="pass">
    <el-input ></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input ></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
}
复制代码
复制代码

1.6动态增减表单

1.7表单样式嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零，不会继承 el-form 的 label-width。如果需要可以为其单独设置 label-width 属性。

2、Table表格

表格分为2部分，el-table,el-table-column

2.1基本使用

 <template>
    <el-table :data="tableData">  //data绑定数据
      <el-table-column prop="date" label="日期"></el-table-column>   //label是表格的第一行，即表头
      <el-table-column prop="name" label="姓名"></el-table-column>  //prop对应展示数据,
    </el-table>
  </template>
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
          }, {
            date: '2016-05-04',
            name: '王小虎',
          }]
        }
      }
    }
  </script>
复制代码
复制代码

2.2样式

带斑马纹：只需在el-table加个stripe

带边框：只需在el-table加个border

宽度：每个el-table-column,

2.3 table展开列和作用域插槽的使用

<template>
  <el-table :data="tableData">
    <el-table-column type="expand">
      <template slot-scope="props">
            <span>{{ props.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="商品 ID" prop="id"></el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
        }]
      }
    }
  }
</script>
复制代码
复制代码

其它的组件在后续文章…

文章版权归作者所有，未经允许请勿转载。

THE END

前端