走马灯组件 Carousel 上的点击事件,需要通过 @click.native实现
<el-carousel-item v-for="item in bannerActivityList" :key="item.id" @click.native="viewDetail(item)">
<img class="medium" :src="item.imgUrl" />
</el-carousel-item>
上传图片后校验未取消问题
this.$refs.ruleForm.validateField('checkPass')
this.$refs.ruleForm.resetFields();
this.$refs.ruleForm.clearFiles()
const validatePassCoverUrl = (rule, value, callback) => {
if (!this.ruleForm.coverUrl2) {
callback(new Error('请上传文件'))
} else {
callback()
}
}
coverUrl2: [
{
required: true,
validator: validatePassCoverUrl,
trigger: 'change'
}
]
el-upload 文件上传格式前端校验
beforeFileUpload(file) {
const allowFileTypes = ['rar', 'zip', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
const fileName = (file.name).split('.')
let fileType = fileName[fileName.length - 1]
const isFile = allowFileTypes.includes(fileType.toLowerCase())
const isLt2M = file.size / 1024 / 1024 < 20
if (!isFile) {
this.$message.error('上传文件只能是 rar、zip、doc、docx、xls、xlsx、pdf 格式!')
}
if (!isLt2M) {
this.$message.error('上传文件大小不能超过 20MB!')
}
return isFile&&isLt2M
},
选择器多选时选择项超出选择框????
<style>
.select-box .el-select__tags-text{
display: inline-block;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.select-box .el-select .el-tag__close.el-icon-close {
top: -7px;
}
</style>
上传组件中,支持上传多张图片时上传中一直闪动????
/deep/.el-upload-list__item.is-ready {
display: none;
}
docSuccess(response, file, fileList) {
if (response.code == '0000') {
this.fileListImg = fileList
}
},
elementui 中上传图片判断格式&和&&的区别
相同点:只要有一端为假,则语句不成立
不同点:& 的左右两个表达式都会成立,&& 中如果左边不成立,不会继续执行右边
element 中 el-table 下设置多选
直接判断此时是否别表中都是禁用,如果是的话,使用 clearSelection()
@select-all="selectAll"
selectAll() {
let isAllDisabled = false
this.tableData.map((item) => {
if (item.id) {
isAllDisabled = true
}
})
if (!isAllDisabled) {
this.$refs.multipleTable.clearSelection()
}
},
Popover 弹出框
控制消失、显示
this.$refs[`popover-${row.id}`].showPopper = false
el-input输入框
<el-input
@input="(e) => (amount = isNumber(e))"
v-model="amount"
class="modify_input"
placeholder="请输入正整数"
></el-input>
isNumber(val) {
val = val.replace(/[^0-9]/gi, '')
return val
}
el-table 中给表头添加自定义图标(使用插槽 slot=“header”)
<el-table-column prop="viewNumber" label="" align="center">
<span slot="header">是否同步省平台</span>
</el-table-column>
树形控件
<el-tree
ref="fundFilesTree"
:data="treeListAll"
:props="defaultProps"
:default-expanded-keys="defaultActive"
@node-click="handleNodeClick"
:draggable="isdraggable"
@node-drop="handleDragEnd"
:allow-drop="allowDrop"
highlight-current
node-key="id"
empty-text="暂无文件夹"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<div :title="node.label" class="overflowHidden">
{{ node.label }}
</div>
<el-popover
placement="bottom"
width="150"
trigger="hover"
class="tree-popover"
style="padding: 0"
>
<div
class="btn-cl"
style="display: flex; flex-direction: column"
>
<el-button
class="tree-box-item"
@click.stop="showNodeDialog(data, 'addSub')"
style="border: none; text-align: left"
>
添加子文件夹</el-button
>
<el-button
class="tree-box-item"
@click.stop="showNodeDialog(data, 'edit')"
style="
border: none;
text-align: left;
margin-left: 0px !important;
"
>
编辑</el-button
>
<el-button
@click.stop="deleteFiles(data)"
class="tree-box-item"
style="
border: none;
text-align: left;
margin-left: 0px !important;
"
>
删除</el-button
>
</div>
<el-button
class="ellipsis-btn btn-roleManage"
slot="reference"
style="padding: 0 15px 15px"
>...</el-button
>
</el-popover>
</span>
</el-tree>
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.data.level === dropNode.data.level) {
if (draggingNode.data.parentId === dropNode.data.parentId) {
return type === 'prev' || type === 'next'
}
} else {
return false
}
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
const obj = {
parentId: '',
ids: []
}
if (dropType === 'inner') {
obj.parentId = dropNode.data.id
for (const item of dropNode.data.childrenList) {
obj.ids.push(item.id)
}
} else {
obj.parentId = dropNode.data.parentId
for (const item of dropNode.parent.childNodes) {
obj.ids.push(item.data.id)
}
}
const ids = obj.ids.length > 0 ? obj.ids.join(',') : ''
const con = { ...obj, ids }
debugger
console.log(dropNode, con)
return
this.$api['system-settings/permission-setting/sortMenu']({
data: con
}).then((response) => {
if (response.code === '0000') {
this.reload()
this.$message({
message: '排序成功',
type: 'success'
})
} else {
this.$message({
message: response.msg,
type: 'error'
})
}
})
},
el-date-picker 时间选择器禁用时间
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.signingDate"
:picker-options="pickerOptions"
style="width: 100%"
></el-date-picker>
pickerOptions: {
disabledDate(data) {
return data.getTime() > new Date()
}
}
el-table相关问题
this.$nextTick(() => {
this.$refs.scrollTable.doLayout()
})
<template slot="empty">
<div>
<img src="@/assets/table-empty.png" alt="" />
<p>暂无数据</p>
</div>
</template>
html
<el-table-column width="55">
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.checked"
@change="changeCurrentRow($event, scope.$index, scope.row)"
></el-checkbox>
</template>
</el-table-column>
js
初始化数据列表时,默认不选中,需要对数据进行处理
res.list.forEach(item => {
Object.assign(item, { checked: false })
})
this.managerList = res.list
changeCurrentRow(val, rowIndex, row) {
const data = this.managerList
for (let index in data) {
if (index == rowIndex) {
data[index].checked = val
} else {
data[index].checked = false
}
}
this.managerList = data
this.selectManagerId = row.checked ? row.id : ''
},
基于 el-element 图片放大
<el-image-viewer
v-if="showViewer"
:url-list="urlList"
:on-close="onClose"
/>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
components: {
ElImageViewer
},
data() {
return {
urlList: [],
showViewer: false,
};
},