VUE+elment项目设置限制字数过滤器（超出要显示的字数用...代替，鼠标悬浮显示全部）

列表中字数太多想要页面显示的美观把多余的字用省略号代替，鼠标悬浮显示全部

效果展示：

 代码如下：

如果多个文件都需要使用此方法，就自己项目的过滤文件中配置

 

export function typefacelength(value) {

  if (!value) return ''

      if (value.length > 10) {

        return value.slice(0,10) + '...'

      }

      return value

}

在需要使用的页面列表字段设置如:

<el-table-column prop="Address" label="地址" width="180">

        <template slot-scope="scope">

          <el-popover trigger="hover" placement="top" :open-delay="800">

            <div class="text_overflow" slot="reference">

              <span>{{ scope.row.dAddress| typefacelength }}</span>

            </div>

            <div class="pup_card">

              {{ scope.row.dAddress}}

            </div>

          </el-popover>

        </template>

      </el-table-column>