问题

elementui 中的 table 行内的内容不能进行换行。

解决方法

思路:

利用 作用域插槽 结合 v-html,通过作用域插槽传递内容到表格行内,再通过 v-html 进行内容的替换。

代码:

<el-table
  :data="tableData"
  stripe
  style="width: 100%"
  @row-click="handleTableRow"
  border
 >
   <el-table-column prop="project" label="项目" width="290">
      <template slot-scope="scope">
        <div v-html="scope.row.content"></div>
      </template>
	</el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
		{
          project: "aaa<br/>111"
        },
        {
          project: "bbb<br/>222"
        },
	  ]
    }
  }
}
</script>

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
请添加图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐