vue element-ui常用总结

1.表格 --显示是或否 、对或错 、是否发布等

• html部分：

<el-table
      size="mini"
      :data="list"
      border
>
   <el-table-column
        label="是否发布"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <i  v-if="scope.row.isRelese" class="el-icon-check"  />
          <i  v-else class="el-icon-close"  />
        </template>
 </el-table-column>
 </el-table>

• js部分：

data(){
list:[
    {
    isRelese:true
    }
  ]
}

• 效果：

  
  效果

2.选择器使用
1）比如选择2020-07-07

• html部分

     <el-date-picker
                v-model="form.startTime"
                :editable="editable"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择开始时间"
/>

• js部分

data(){
  return{
 editable:false,//控制时间选择器不可输入
      form:{
            startTime:""
          }
    }
}

• 效果

  
  选择2020-07-07

2）比如选择2020年，传递后台值为2020。

• html部分

   <el-date-picker
                v-model="form.year"
                type="year"
                :editable="editable"
                format="yyyy年"
                value-format="yyyy"
                placeholder="请选择年度"
        />

• js部分：

data(){
   return{
  editable:false,//控制时间选择器不可输入
  form:{
  year:""
}
    }
}

注解：format 属性用于配置展示时的格式，value-format属性用于配置传递给后台的数据格式 。

• 效果

  
  选择年度

3.表单下拉选择
是否发布选择

• html部分

<el-select
                v-model="form.isRelese"
                placeholder="请选择是否发布"
              >
                <el-option
                  label="是"
                  value="true"
                />
                <el-option
                  label="否"
                  value="false"
                />
 </el-select>

• js部分：

data(){
 return{
form:{
isRelese:"true"//(字符串格式才能默认选中)
  }
 }
}

• 效果

  
  是否发布选择

或者使用开关:
html部分:

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

js部分:

data(){
return  {
  value:true
  }
}

效果为:

image.png

4.element设置表格默认勾选
说明：element官网有设置表格默认选中状态的效果，但是很多时候都是后端获取数据后再进行展示。

• 首页获取数据（选中的数据以及表格展示的数据）。

注意两个数据必须是同一个对象的数据，也就是数据必须是表格当中的数据(同一个表格值)

• 设置表格数据--tableData

• 设置完成后，在dom挂载之后执行选中。
  this.$refs.multipleTable.toggleRowSelection(row);//此时row必须时此时已经渲染到table中的数据。
  例如：
  1.tableData表格数据源
  2. this.$refs.multipleHouseTable.toggleRowSelection(tableData[0])

5.element 表单验证
element+vue验证顺序：form–>prop–>rules–>validator–>自定义规则
1)身份证

 [ 
{required: true, message: '请输入身份证号', trigger: 'blur'}, 
{   min: 15,max: 18, message: '请如实填写18份证号码', trigger: 'blur' },
{  required: true,   pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,  
 message: '请输入正确的身份证号码',   trigger: 'blur' }
]

2）手机号码

[
          {
            type: 'number',
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
            message: '请输入正确手机号',
            trigger: 'blur'
          }
        ]

3. 邮箱

[
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]

更新中............