记录一个el组件，传入文本。只展示一部分，可以传入数组，并且可以取出部分值展示

<template>
  <el-popover
    placement="bottom"
    width="300"
    trigger="hover"
    :content="textInfo"
  ><!--弹窗内容--><!--这里的info我们不直接使用传值过来的text，我们自己定义一个参数，然后通过init初始化的时候匹配类型计算应该给他的值-->
    <el-button slot="reference">{{ textInfo | textFiler }}</el-button><!--按钮内容-->
  </el-popover>
</template>

<script>
export default {
  name: 'TeamTextAll',
  filters: {
    /* 控制文本长度的过滤器*/
    textFiler(txt) {
      if (txt === null || txt.length === 0) {
        return 'blank'
      }
      if (txt.trim().length <= 8) {
        return txt
      }
      return txt.substring(0, 8)
    }
  },
  props: {
    // 文本
    text: {
      type: String,
      required: false,
      default: 'null'
    },
    // 长度
    size: {
      type: Number,
      required: false,
      default: 8
    },
    // 类型，可以自己设定，然后通过if进行对应操作
    type: {
      type: String,
      required: false,
      default: 'text'
    },
    // 我这里需要roles所以使用了这个传list专用的
    roles: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      name: 'TeamTextAll',
      textInfo: ''
    }
  },
  // 生命周期初始化方法
  created() {
    this.init()
  },
  methods: {
    // 初始化方法，如果是role类型就取名字拼接并设置给文档区，如果是txt类型设置原内容到文档区，稍后简略和全文都会读取文档区内容
    init() {
      if (this.type === 'role') {
        this.textInfo = this.roleNameFilter(this.roles)
      }
      if (this.type === 'text') {
        this.textInfo = this.text
      }
    },
    // 拼接角色用的
    roleNameFilter(userRole) {
      console.log('1')
      let roleText = '|'
      console.log('2')
      userRole.forEach(role => {
        roleText = roleText + role.roleName + '|'
      })
      console.log('roleText')
      console.log(roleText)
      return roleText
    }
  }
}
</script>

<style scoped>

</style>

---

使用方法调用替代了过滤器

<template>
  <el-popover
    placement="bottom"
    width="300"
    trigger="hover"
    :content="textInfo"
  ><!--弹窗内容--><!--这里的info我们不直接使用传值过来的text，我们自己定义一个参数，然后通过init初始化的时候匹配类型计算应该给他的值-->
    <!-- <el-button slot="reference">{{ textInfo | textFiler }}</el-button>--><!--按钮内容-->
    <el-button slot="reference">{{ textFiler(textInfo) }}</el-button><!--按钮内容-->
  </el-popover>
</template>

<script>
export default {
  name: 'TeamTextAll',
  filters: {
    /* 控制文本长度的过滤器*/
    textFiler(txt) {
      const size = this.size
      if (txt === null || txt.length === 0) {
        return 'blank'
      }
      if (txt.trim().length <= size) {
        return txt
      }
      return txt.substring(0, size)
    }
  },
  props: {
    // 文本
    text: {
      type: String,
      required: false,
      default: 'null'
    },
    // 长度
    size: {
      type: Number,
      required: false,
      default: 8
    },
    // 类型，可以自己设定，然后通过if进行对应操作
    type: {
      type: String,
      required: false,
      default: 'text'
    },
    // 我这里需要roles所以使用了这个传list专用的
    roles: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      name: 'TeamTextAll',
      textInfo: ''
    }
  },
  // 生命周期初始化方法
  created() {
    this.init()
  },
  methods: {
    // 初始化方法，如果是role类型就取名字拼接并设置给文档区，如果是txt类型设置原内容到文档区，稍后简略和全文都会读取文档区内容
    init() {
      if (this.type === 'role') {
        this.textInfo = this.roleNameFilter(this.roles)
      }
      if (this.type === 'text') {
        this.textInfo = this.text
      }
    },
    // 拼接角色用的
    roleNameFilter(userRole) {
      let roleText = '|'
      userRole.forEach(role => {
        roleText = roleText + role.roleName + '|'
      })
      console.log(this.size)
      return roleText
    },
    /* 控制文本长度的过滤器*/
    textFiler(txt) {
      const size = this.size
      if (txt === null || txt.length === 0) {
        return 'blank'
      }
      if (txt.trim().length <= size) {
        return txt
      }
      return txt.substring(0, size)
    }
  }
}
</script>

<style scoped>

</style>