elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover_element 表格hover显示数据

1.场景效果

2.实现

  <el-table-column prop="pushContent" label="挂号短信内容" min-width="12%">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" :disabled="isShowPoppver(scope.row.pushContent)">
                <p style="max-width:600px;">{{ scope.row.pushContent }}</p>
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.pushContent | ellipsis(30) }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
//vue script
      isShowPoppver(val,limit){
       if(val && val.length >= limit){
        return false
       }
       else{
        return true
       }
    },
    //表格数据过滤
    ellipsis(value, limit) {
      if (!value) return "/";
      else if (value.length > limit) {
        return value.slice(0, limit) + "...";
      } else {
        return value;
      }
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

根据自己的需求改下prop值应该就可以了

3.进阶版

 <el-table-column prop="relatedKnowNames" label="关联课程" min-width="20%">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" :disabled="isShowDieasePoppver(scope.row.relatedKnowNames)">
                <p style="max-width:600px;">{{ scope.row.relatedKnowNames | filterBr }}</p>
                <div slot="reference" class="name-wrapper">
                  <span v-html="showDiease(scope.row.relatedKnowNames)"></span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
//js
   //查找字符串中某个字符在字符串中第几次出现的位置
    getIndexWhichTimesOfChar(str, cha, num) {
      let x = str.indexOf(cha);
      if (x == -1) return -1;
      for (let i = 0; i < num - 1; i++) {
        x = str.indexOf(cha, x + 1);
        if (x == -1) return -1;
      }
      return x;
    },
    showDiease(val) {
      if (!val) return '/'
      else {
        let index = this.getIndexWhichTimesOfChar(val, '>', 3)
        console.log(index)
        if (index == -1) {
          return val
        }
        else {
          return val.slice(0, index - 4) + "..."
        }
      }
    },
    //判断是否显示popover
    isShowDieasePoppver(val) {
      if (!val) return true;
      if (val) {
        let index = this.getIndexWhichTimesOfChar(val, '>', 3)
        if (index == -1) {
          return true
        }
        else {
          return false
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47