使用element UI过程中遇到的一些问题及解决办法

一. 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>
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= ''
	},
 }
}