一. dialog对话框响应式缩放
1.首先要动态设置width的宽度，默认为0
<template>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
：width="dialogWidth"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
2.在生命周期mouted获取当前电脑尺寸并且调用判断方法
<script>
export default {
data () {
return {
dialogWidth:0
}
},
mounted() {
window.onresize = () => {
return (() => {
this.setDialogWidth()
})()
}
},
methods:{
setDialogWidth() {
var val = document.body.clientWidth
const def = 800 // 默认宽度
if (val < def) {
this.dialogWidth = '100%'
} else {
this.dialogWidth = def + 'px'
}
},
}
}
</script>
这样就可以了
二.tree树形控件的默认选中和获取当前选中的数组
1.获取当前所有选中的值，并组合成一个数组
<template>
<el-tree
:data="quanxianList"
show-checkbox
default-expand-all
node-key="id" /*这个必须写 */
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
</template>
export default {
data () {
return {
quanxianList:[], //绑定的数据
defaultProps: {
children: 'list',
label: 'title'
}, //规则
}
},
// 获取选中值，并组成数组
methods:{
saveEdit(){
let checkedNodes = this.$refs.tree.getCheckedNodes(); // element组件库自带方法，若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
let checkedMenuIds=new Set() //数组去重
if(checkedNodes!=null&&checkedNodes.length>0){
for(let i=0;i<checkedNodes.length;i++){
let checkedNode = checkedNodes[i];
checkedMenuIds.add(checkedNode.id);
}
}
let list = Array.from(checkedMenuIds) // 就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
// 如需默认选中(一进页面或者在table表格中编辑时候，请使用下面这个方法)
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys([]);//获取已经设置的资源后渲染,这个数组中只能是number类型的数字
})
}
}
}
使用图片上传组件el-upload动态添加，获取当前的图片
1.首先我这个组件是外层有一个div做循环，然后放在form表单中，点击按钮的时候，动态添加一个上传图片的组件
<template>
<el-button type="primary" @click="addttribute">添加图片</el-button>
<div v-for="(item,index) in tabBar " :key="index">
<el-form ref="form" :model="item">
<el-form-item label="tabBar激活图片">
<div @click="getTarindex(index)"> 这里写点击事件，是为了拿到当前index值，后续正确赋值
<img style="height:100px;width:100px; margin-bottom: 10px;" :src="item.active_url" alt="" v-if="item.active_url" />
<el-upload action="上传图片地址" list-type="picture-card" :on-success="gavetabbar" :on-remove="romovetabbar">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</el-form-item>
</el-form>
</div>
</template>
2.在data中定义数据，methods写函数方法
export default {
data () {
return {
tabindex:"" ,
tabBar:[]
}
},
methods:{
// 往数组中追加参数
addttribute(){
let params = {
url:'',
}
this.tabBar.push(params)
},
// 这个这里函数可以拿到当前的index
getTarindex(index){
this.tabindex = index
},
// 动态赋值每个图片路径
gavetabbar(res,file){
this.tabBar[this.tabindex].url= res.url
},
// 动态取消每个图片路径
romovetabbar(){
this.tabBar[this.tabindex].url= ''
},
}
}