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()
}
网友评论