vue文字超过就会自动省略号（element可用）_element自动省略号

方法1（适合element使用）：

    filters: { 
  　　　　formatLongText(value) {
    　　　　if(value===undefined||value===null||value===''){
      　　　　return '暂无';
    　　　　}else if(value.length>8){
    　　　　 return value.substr(0, 8) + '...';
  　　　　 }else{
    　　　　　　 return value;
  　　　　 }
  　　　　},  

      ellipsis(value, limit) {
          if (!value) return ''
          if (value.length > limit) {
              return value.slice(0, limit) + '...'
          }
          return value
      },

  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用：

  <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter"
      width="300"
        show-overflow-tooltip
    >
        <template slot-scope="scope">
              <span> {{scope.row.address|ellipsis}}</span>
        </template>
    </el-table-column>
    <el-table-column
      prop="volume"
      label="订单"
      :formatter="formatter"
      width="300"
    >
    </el-table-column >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法二（vue适合使用）

  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
  },
1
2
3
4
5
6
7
8
9

使用

 <span>{{ pagename|ellipsis }}</span>
1