element 某些组件的特殊设置

1. input=number 限制输入长度,输入数字的大小和禁止输入e

 <el-input type="number"
     v-model="form.seq"
     :disabled="formEdit"
      oninput="if(value>127)value=127"
      onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'
      placeholder="请输入排序">
</el-input>

οninput="if(value>127)value=127" //限制输入的大小

οnkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))' //限制输入e

οninput="if(value.length>11)value=value.slice(0,11)" //限制输入长度

2. element中table去掉表头th内的padding

一般选中table的class之后没有效果通常是因为Vue中的style标签上加上了scoped属性，此时只要去掉就行。

3. 隐藏element ui 下拉菜单Dropdown中的小三角

  .el-popper /deep/ .popper__arrow {
    border-bottom-color: #1EBEF4 !important;
    left: 50% !important;
    visibility: hidden;
  }

4. css设置el-table指定单元表格底部线段为白色

js: 合并第0-2列和大于第7列的偶数行到奇数行

<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border>
...
</el-table>
...

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex <= 2 || columnIndex >= 7) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },

.el-table__row {
        &:nth-child(2n + 1) {
            td {
                &:nth-child(4),
                &:nth-child(5),
                &:nth-child(6),
                &:nth-child(7) {
                    border-bottom-color: #fff;
                }
            }
        }
    }

结果如图：

例子

5. element UI -- Dialog关闭后清除form的验证条件

<el-dialog
            class="person-edit-detail"
            :title="title"
            :visible.sync="visible"
            width="640px"
            :before-close="handleClose"
        >
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
  </el-form>
</el-dialog>

...
methods: {
  handleClose(){
    this.$refs['ruleForm'].resetFields();
  }
}

element UI --form文档中，resetFields()：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

6. v-model.trim用于去掉输入框内首尾空格

<el-input type="textarea" v-model.trim="deleNsbp" ></el-input>

el-input 中v-model加上 .trim 那么在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的

7. 自动展开element的select组件的下拉选项

<el-select ref="select" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

mounted () {
      this.$refs.select.toggleMenu()
}

8. 有待持续更新。。。