随笔分类 - 10-Element-ui相关
摘要：一般情况下el-select只做选择使用，但也有场景，没有选项时可手动输入值进行保存。只需给其加一个blur的方法，用法如下： 页面代码： <el-select v-model="form.sex" placeholder="" filterable @blur="selectBlur"> <el-
阅读全文
摘要：1.去除自带黑色边框 当打开抽屉(el-drawer)时，默认会对标题加上黑色边框，如下图： 仔细发现，整个抽屉的body也会有黑色边框。看起来很丑吧，可通过css去掉： /deep/ :focus { outline: 0; } 需要注意的是，这里使用了deep。原因是在vue组件中，在style
阅读全文
摘要：当在el-aidlog中给某个标签使用ref属性后，获取时总是显示undefined，原因是在获取时el-dialog还未渲染完成。因此可使用nextTick中再获取 this.$nextTick(() => { this.$refs['image-upload'].showFileList() }
阅读全文
摘要：使用checkbox选中时有一个触发事件，那么触发事件可以调用下面的方法： //多选框选中事件 handleSelectionChange(val) { this.multipleSelection = [] //val是选中的数据的数组 val.forEach(item => { const id
阅读全文
摘要：当它们一起使用时，一般select长度是默认的，会比input短，只需要设置其宽度是100%即可。 .el-form-item .el-select { width: 100%; } 同理，el-date-picker也是类似的，但有所差别。 给其设置class， <el-date-picker v
阅读全文
摘要：要修改dialog的样式不能直接在<style scoped>中修改，这样修改后不会生效。做法是把scoped去掉，然后在dialog标签上自定义一个class，最好不要和其他的class同名，然后通过此class选择器再去修改里面的相关样式即可。 <template> <el-dialog tit
阅读全文
摘要：有时候el-input由于嵌套的层级比较多，数据双向绑定无效。有两种解决方案，一是减少层级的嵌套，这对于必须嵌套多层的页面来说，无法解决。 第二种方法：在嵌套的无法进行动态绑定的页面的输入框上添加一个input事件，在input执行的方法中强制刷新数据： <template> <el-form :m
阅读全文
摘要：先上效果图： 说明：在table中，点击不同行的发送按钮，只有此行的按钮进行加载，请求后台成功后停止加载。 具体看代码（只有前台代码）： <template> <el-table :data="userList" border fit class="user_table"> <el-table-co
阅读全文
摘要：先看效果图： 以上是一个表单，俱乐部的名称是必填的；俱乐部成员是一个table数据，至少有一个，且可以点击添加按钮添加多个 ，但动态添加的行都需要进行表单验证。这里演示说明，电话没有做正则验证。代码如下： <template> <el-dialog :visible.sync="dialogVisi
阅读全文
摘要：在官网可以看到，input、select等标签，当绑定值变化时，就会触发chenge方法，默认里面传递的是更新后的值。使用radio为例说明： 1）不传递参数 <el-radio @change="getValue" label="1" v-model="sex">男</el-radio> <el-
阅读全文
摘要：1.表单及验证 <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop
阅读全文
