Vue 日常开发问题总结

521 阅读2分钟

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>

如图

20190107102958724.png

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:[]
  }
}

如图所示

1.png

在选择日期范围之前,value是一个空数组。选择日期后,输出value:

2.png

当点击清除按钮后,再次输出value,就会发现这种报错信息:

3.png

出现这种情况的原因是: 当点击清除按钮的时候,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-formatformat

 

value-format绑定值的格式也就是最后后端接口需要我们传的数据格式

format的属性,是控制显示的格式的。最后选中以后显示在输入框中的格式

 
 value-format="yyyy"     年
 value-format="yyyy-MM-dd"      年月日
 value-format="yyyy-MM-dd HH:mm:ss" 年月日 时分秒