Table 表格相关
1.设置表格el-table表头的颜⾊：header-cell-style 可以修改背景及其他
<el-table :data="tableData"
:header-cell-style="{background:'#000', color:'#fff'}" >
2.设置某⼀列的字段字体颜⾊
⽅法1： :cell-style="setCellColor"
<el-table :data="tableData" :cell-style="setCellColor">
setCellColor({row,column,rowIndex,columnIndex}){
if(columnIndex===3){
return 'color:#239ce6;';
}
},⽅法2：卡槽
<el-table-column label="名字" prop="name" width="180">
<template slot-scope="scope">
<span v-if="scope.row.errorMsg" style="color: red">{{scope.row.name}}</span>
<span v-else>{{scope.row.name}}</span>
</template>
</el-table-column>表格数据在渲染的时候， 建议使⽤深拷贝的⽅法，赋值⼀下。否则会出现，表格数据更新延迟。 深拷贝⽅
法： this.tableData = JSON.parse(JSON.stringify(this.tableData));
3. table单元格添加tooltip ⽂字提⽰，并且根据后台返回数据判断tooltip是否显⽰
// 把条件写在 el-tooltip 标签⾥⾯ v-if 然后还要⼀个 v-else 不需要 el-tooltip 的，只显⽰数据的。
<el-table-column label="名字" prop="name" >
<template slot-scope="scope">
<el-tooltip placement="top" effect="light" v-if="scope.row.errorMsg">
<div style="color:red">{{scope.row.name}}</div>
<div slot="content" style="color:red">{{scope.row.errorMsg}}</div>
</el-tooltip>
<div v-else>{{scope.row.name}}</div>
</template>
</el-table-column>4. 多选表格，多页⾯选checkbox回显禁⽤相关
reserve-selection 与 row-key结合使⽤
<el-table ref="multipleTable" v-loading="loading" :data="tableData" empty-text="没有查询到您想要的数据" style="width:100%;" height="400" size="small" border
@selection-change="handleSelectionChange" :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true" width="60" align="center"
:selectable="checkSelectable">
</el-table-column>
// getRowKeys绑定放在data中retrun ⾥
data () {
return {
getRowKeys (row) {
return row.id;
},
...
}
或
1）在表格加上属性 :row-key="(row) => { return row.id }"
row-key绑定⼀个函数，该函数返回每⾏数据的唯⼀标识
2）在多选的column标签加上 :reserve-selection=“true” 开启
//
methods⾥
//禁选
checkSelectable (row) {
return !(row.checkDisabled == true)
},
//勾选的数据
handleSelectionChange (val) {
this.multipleSelection = val;
},选中数据后台获取回显禁⽤
// 获取后台返回的表格数据
getList (_param) {
if (_param === true) {
this.GoodspageNum = 1
}
this.loading = true
this.$http.post(api.getList, {
...this.searchContent,
pageNum: this.GoodspageNum,
pageSize: this.GoodspageSize,
status: status,
}).then(res => {
if (res.code === 0) {
this.loading = false
this.tableData = res.data.list
this.total = res.data.total
this.Arr = this.multipleSelection // 多选表格选中的数据
// 判断条件：当status为 0 时，多选框禁⽤
this.tableData.forEach(item => {
if (item.status === 0) {
setTimeout(() => {
this.$set(item, 'checkDisabled', true)
}, 300);
}
})
// 判断条件：当 Arr中id和tableData的id相同时，多选框回显（选中数据：勾选+禁⽤）
this.$nextTick(() => {
this.tableData.map(item => {
this.Arr.map(val => {
if (item.id== val.id) {
setTimeout(() => {
this.$refs.multipleTable.toggleRowSelection(item, true); //true 选中
this.$set(item, 'checkDisabled', true) //true 禁选
}, 300);
}
})
})
})
console.log(this.tableData)
return
}
throw new Error(res.msg)
}).catch(e => {
this.loading = false
this.$notify.error({
title: '提⽰',
message: e.message
})
})
},清空选中数据时报错：Cannot read properties of undefined (reading 'clearSelection'）解决办法：
this.$nextTick(() => {
this.$refs.multipleTable.clearSelection()
})
//如果继续报nextTick相关错误，
//Error in nextTick: "TypeError: Cannot read property ‘xxx‘ of undefined"
//解决：加⼀个判断 if (数据存在)，再执⾏this.nextTick()⽅法
if (this.$refs.multipleTable) {
this.$nextTick(() => {
this.$refs.multipleTable.clearSelection()
})
}关于vue 的 this.$refs 打印为undefined解决办法：
Vue官⽹中ref 下有⼀段话 "关于 ref 注册时间的重要说明：因为 ref 本⾝是作为渲染结果被创建的，在初始渲染的时候你不能访问
它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图⽤它在模板中做数据绑定。"
ref 只有等页⾯加载完成好之后你才能调⽤ this.$refs ，如果你使⽤v-if 、v-for渲染页⾯的话，那么在刚开始页⾯没没渲染之前你是
拿不到this.$refs 的，所以要等到页⾯渲染之后拿才可以
1、如果你在mounted⾥获取this.$refs，因为dom还未完全加载，所以你是拿不的， update阶段则是完成了数据更新到 DOM 的阶
段(对加载回来的数据进⾏处理)，此时，就可以使⽤this.$refs了
2、如果写在method中，那么可以使⽤ this.$nextTick(() => {}) 等页⾯渲染好再调⽤
Radio 单选框相关
1. 按钮形式的 Radio 激活时的填充⾊和边框⾊，选中颜⾊改为⿊⾊
/* 选中颜⾊改为⿊⾊ */
>>> .el-radio__input.is-checked + .el-radio__label {
color: #000000 !important;
}
>>> .el-radio__input.is-checked .el-radio__inner {
border-color: #606266 !important;
background: #606266 !important;
} 2. 循环多个el-radio-group 如何取值赋值
<template>
<div>
<p>radioArray：{{form.radioArray}}</p>
<div v-for="(item,index) of list2" :key="index">
<el-radio-group v-model="form.radioArray[index]">
<el-radio v-for="it of item.list" :key="it.id" :label="it.id" @change="handleRadioChanges(item,it.id)">
{{it.anames}}
</el-radio>
</el-radio-group>
</div>
结果：{{reslist}}
</div>
</template>
<script>
export default {
data () {
return {
form: {
radioArray:[]
},
reslist: [],
list2: [
{
id:'000',
list: [
{id:'11', anames: '备1', pcStatus: null},
{id:'12', anames: '备2', pcStatus: null},
{id:'13', anames: '备3', pcStatus: null}
]
},
{
id:'001',
list: [
{id:'14', anames: '备4', pcStatus: 1},
{id:'15', anames: '备5', pcStatus: null},
{id:'16', anames: '备6', pcStatus: null}
]
},
{
id:'002',
list: [
{id:'11', anames: '备1', pcStatus: null},
{id:'12', anames: '备2', pcStatus: null},
{id:'13', anames: '备3', pcStatus: null}
]
}
]
};
}，
created () {
this.handCheck()
},
methods:{
// 赋值
handCheck(){
const aaa = []
this.list2.forEach((item,index) => {
item.list.forEach(it => {
if(it.pcStatus === 1){
aaa.push(it.id)
}
})
if(aaa.length!==index+1){
aaa.push(null)
}
})
this.form.radioArray = aaa
},
// 取值
handleRadioChanges(item, id) {
this.writeText2 = item
this.writeText3 = id
item.list.forEach(res => {
if(res.id === id){
res.pcStatus = 1
}else {
res.pcStatus = 0
}
})
})
this.reslist.push(item)
let newArry=this.reslist;
//数组去重选择最后⼀条数据
for(var i=0;i<newArry.length;i++){
for(var j=i+1;j<newArry.length;j++){
if(newArry[i].id==newArry[j].id){
newArry.splice(i,1);
j--;
}
}
}
this.reslist=newArry;
}
}
}
</script>Upload 上传相关
1. 只能上传jpg / png格式
2. 图⽚⼤⼩不能超过2M
3. 图⽚像素要⼤于600*400
<template>
<div>
<el-upload
action = "#" //上传的地址，必填
list-type = "picture-card" //⽂件列表类型，text/picture/picture-card
:class = "{disabled:isMax}" //动态绑定class，(此处是隐藏上传框的关键)
:limit = 3 //限制上传图⽚的数量
:on-success = "success" //⽂件上传成功的钩⼦
:on-error = "error" //⽂件上传失败的钩⼦
:on-change = "change" //⽂件状态改变的钩⼦
:on-progress = "progress" //⽂件上传时候的钩⼦
:on-remove = "remove" //⽂件移除的钩⼦
:before-upload = "beforeAvatarUpload"> //⽂件上传前的钩⼦
<i class="el-icon-upload"></i>
<div class="el-upload__text">封⾯</div>
</el-upload>
</div>
</template>在⽂件上传前的钩⼦ beforeAvatarUpload ⾥限制：
beforeAvatarUpload:function(file){
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isPG = (isJPG || isPNG) //限制图⽚格式为jpg / png
const isLt2M = file.size / 1024 / 1024 < 2; //限制图⽚⼤⼩
const isSize = new Promise(function(resolve,reject) {
let width = 600
let height = 400
let _URL = window.URL || window.webkitURL
let img = new Image()
img.onload = function() {
let valid = img.width >= width && img.height >= height
valid ? resolve() : reject();
}
img.src = _URL.createObjectURL(file)
}).then(() => {
return file;
},()=>{
this.$message.error('上传图⽚像素要⼤于600*400!');
return promise.reject();
})
if (!isPG) {
this.$message.error('上传头像图⽚只能是 JPG 或 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图⽚⼤⼩不能超过 2MB!');
}
return isPG && isLt2M && isSize
}
}Dialog 对话框相关
1.点击弹窗以外的区域不关闭弹窗
//1. :close-on-click-modal="false"
<el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%">
弹窗内容
</el-dialog>
//2. 在mian.js⾥⾯：修改 el-dialog 默认点击遮照为不关闭,全局。
import ElementUI from 'element-ui';
ElementUI.Dialog.props.closeOnClickModal.default = false2.vue 使⽤element-ui的el-dialog时 由于滚动条隐藏和出现导致页⾯抖动问题的解决
// main.js，⼊⼝⽂件中加 ElementUI.Dialog.props.lockScroll.default = false;
import ElementUI from 'element-ui';
ElementUI.Dialog.props.lockScroll.default = false;
Vue.use(ElementUI);1. 给组件绑定的事件为什么⽆法触发？
在 Vue 2.0 中，为⾃定义组件绑定原⽣事件必须使⽤ 修饰符：.native
<my-component @click.native="handleClick">Click Me</my-component>从易⽤性的⾓度出发，我们对Button组件进⾏了处理，使它可以监听click事件：
<el-button @click="handleButtonClick">Click Me</el-button>但是对于其他组件，还是需要添加.native修饰符。
2.如何在 Table 组件的每⼀⾏添加操作该⾏数据的按钮
使⽤即可：
<el-table-column label="操作">
<template slot-scope="props">
<el-button @click.native="showDetail(props.row)">查看详情</el-button>
</template>
</el-table-column>参数row即为对应⾏的数据。
3.Tree 组件的 `render-content` 和 Table 组件的 `render-header` 注意事项
使⽤ JSX 来写 Render Function 的话，需要安装babel-plugin-transform-vue-jsx，并参照其进⾏配置。
4.所有组件的任意属性都⽀持 `.sync` 修饰符吗？
不是。对于⽀持.sync修饰符的属性，我们会在⽂档的 API 表格中注明。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
