2020-12-18:css数字字母换行、组件之间优雅的传值、对象数组按照某一属性值(数组)来进行筛选、el-select的option的样式修改

1、css数字字母换行

word-break:break-all;

2、组件之间优雅的传值!!!

①、创建一个js文件

import Vue from 'vue'
const Bus = new Vue()
export default Bus

②、在需要传值过去的组件

Bus.$emit('goFacility', newVal)

③、在需要接收传值的组件

  mounted() {
    const that = this
    Bus.$on('goFacility', msg => {
      that.listQueryParam = msg
      console.log(that.listQueryParam, '========')
      debugger
    })
  },

3、对象数组按照某一属性值(数组)来进行筛选

对象数组:
     arrList = [
        {
          id: 1,
          name: 'ws1',
          text: '111'
        },
        {
          id: 2,
          name: 'ws2',
          text: '222'
        },
        {
          id: 3,
          name: 'ws3',
          text: '333'
        },
        {
          id: 4,
          name: 'ws4',
          text: '444'
        },
        {
          id: 5,
          name: 'ws5',
          text: '555'
        }
      ]
需要被按照来筛选的数组:
arr = ['111', '222', '444']
进行筛选:
newArr = arrList.filter((item) => !arr.includes(item.text))

4、el-select的option的样式修改

在el-select上加上:popper-append-to-body="false"


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容