1.vue修改element-ui el-table的样式,如header的字体颜色、背景色和tr的字体颜色、背景色
<el-table
:data="tableData"
:row-style="tableRowStyle"
:header-cell-style="tableHeaderColor">
<el-table-column
property="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
property="age"
label="年龄"
width="120">
</el-table-column>
<el-table-column
property="sex"
label="性别"
width="120">
</el-table-column>
</el-table>
</template>
export default {
name: 'table',
data() {
return {
tableData: [
{
name: 'Cindy',
age: 20,
sex: '女'
},
{
name: 'Mila',
age: 22,
sex: '女'
},
{
name: 'Bob',
age: 23,
sex: '男'
}
]
}
},
created() {},
methods: {
// 修改table tr行的背景色
tableRowStyle({ row, rowIndex }) {
return 'background-color: pink'
},
// 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background-color: lightblue;color: #fff;font-weight: 500;'
}
}
}
}
</script>
如图
2 elementUI组件之对话框点击空白处不关闭
使用官方文档提供的属性:close-on-click-modal
注意:这里的modal指的是遮罩层!!
默认点击遮罩层是可以关闭的,只需要设置成false即可。
<el-dialog title="编辑" :close-on-click-modal="false"></el-dialog>
Element-ui踩坑记录 DatePicker日期选择器清除后报错
报错信息:[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘0’ of null”
<el-date-picker
v-model="value"
type="datetimerange"
:clearable="true"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
data(){
return {
value:[]
}
}
如图所示
在选择日期范围之前,value是一个空数组。选择日期后,输出value:
当点击清除按钮后,再次输出value,就会发现这种报错信息:
出现这种情况的原因是: 当点击清除按钮的时候,value会被设置为null。 Element-ui中没有内置清除按钮的回调函数。因此要解决这个bug,我使用的方法是在下次调用之前,为value重新赋值,即:
if (!this.value) {
this.value = []
}
或者在取值的时候判断一下,即:
this.searchForm.startTime = this.value ? this.value[0] || '' : '';
this.searchForm.endTime = this.value ? this.value[1] || '' : '';
在IE浏览器 element ui table 不显示问题
在 app.vue 中设置样式
.el-table {
-ms-flex: none !important;
flex: none !important;
height: max-content;
}
element ui Container 布局容器 在IE浏览器显示问题
el-container 标签只能存在一个不能再包el-container 用div 且设置宽度否则不显示内容
vue 样式穿透问题
>>> 如果vue的style使用的是css,那么则
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.
/deep/
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告。此时我们可以使用第三种方式
::v-deep 必须是双冒号
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
vue 渲染不显示图片问题
{
id: 1,
name: '首页',
///需要用require 来引入图片
img: require('@/assets/11.png'),
},
element-ui的日期格式和时间点格式
日期时间格式 : 显示的可能是正确的时间格式但是最后获取的那个model的值就不是显示的那个样子的。
比如显示年月日时分秒。但是后台只需要年月日。这个时候就利用value-format和format
value-format绑定值的格式也就是最后后端接口需要我们传的数据格式
format的属性,是控制显示的格式的。最后选中以后显示在输入框中的格式
value-format="yyyy" 年
value-format="yyyy-MM-dd" 年月日
value-format="yyyy-MM-dd HH:mm:ss" 年月日 时分秒