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