avue加省略号的处理

思路：是引入之前定义好的模板，

定义插槽的模板

 <template slot="requirementName" slot-scope="scope">
        <ellipsis :length="14" tooltip>{{ scope.row.requirementName }}</ellipsis>
      </template>
      <template slot="requirementNo" slot-scope="scope">
        <ellipsis :length="14" tooltip>{{ scope.row.requirementNo }}</ellipsis>
      </template>

引入组件

import Ellipsis from '@/components/Ellipsis'

在需要省略的字段上添加插槽

 column: [
            {
              label: "需求单号",
              prop: "requirementNo",
              align: 'center',
              search: true,
              slot: true,  //加上这个slot
              rules: [{
                required: true,
                message: "请输入需求单号",
                trigger: "blur"
              }],
            },

引入组件

components: {
      Ellipsis
    },

组件的代码

<script>
import { Tooltip } from 'ant-design-vue'
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/util'
/*
    const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;

    const TooltipOverlayStyle = {
      overflowWrap: 'break-word',
      wordWrap: 'break-word',
    };
  */

export default {
  name: 'Ellipsis',
  components: {
    Tooltip
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-ellipsis'
    },
    tooltip: {
      type: Boolean
    },
    length: {
      type: Number,
      required: true
    },
    lines: {
      type: Number,
      default: 1
    },
    fullWidthRecognition: {
      type: Boolean,
      default: false
    }
  },
  filters:{
    a(){
      return 'ee';
    },
  },
  methods: {
    a1(){
      return 'e';
    },
    getStrDom (str, fullLength) {
      return (
        <span>{ cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '') }</span>
      )
    },
    getTooltip (fullStr, fullLength) {
      return (
        <Tooltip>
          <template slot="title"  ><span>{fullStr}</span></template>
          { this.getStrDom(fullStr, fullLength) }
        </Tooltip>
      )
    }
  },
  render () {
    const { tooltip, length } = this.$props
   
    const str = this.$slots.default.map( vNode => vNode.text).join('').replace(/<[^>]+>/g, "").replace(/&nbsp;/g, "");
    const fullLength = getStrFullLength(str)
    const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
    return (
      strDom
    )
  }
}
</script>