若依框架学习及其相关内容

目录

1、列表显示富文本字段

2、列表内容字段过长不显示，设置提示显示

---

1、列表显示富文本字段

具体如下：

//1
<el-table-column prop="Content" label="新闻内容" width="300">
    <template slot-scope="scope">
      <div v-html="scope.row.Content" style="height:280px"></div>
    </template>
</el-table-column>

//2
<el-table-column label="新闻内容" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div
            class="dialog-content"
            id="notContent"
            v-html="scope.row.Content.replace(/<\/?.+?\/?>/g, '') "
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 100%;
              height: 34px;
              text-align: center;"
          ></div>
        </template>
</el-table-column>

2、列表内容字段过长不显示，设置提示显示

（Vue elementui table表格中参数过长进行省略并且提示显示）

给过长字段添加：:show-overflow-tooltip="true"，然后设置样式即可

<style lang="scss" >
/* 设置显示隐藏部分内容，按40%显示 */
.el-tooltip__popper {
  font-size: 14px;
  max-width: 50%
}
</style>