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