elementui中table标题和内容插槽

最新推荐文章于 2025-01-07 17:34:56 发布

cc&

最新推荐文章于 2025-01-07 17:34:56 发布

阅读量600

点赞数 4

文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/grow_/article/details/142869959

版权

代码

<template>  
  <el-table :data="tableData">  
    <el-table-column>  
      <template slot="header" slot-scope="scope">  
        <el-tooltip content="这是列的提示信息" placement="top">  
          <span>列标题</span>  
        </el-tooltip>  
      </template>  
      <template slot-scope="scope">  
        <!-- 列内容 -->  
        {{ scope.row.someProperty }}  
      </template>  
    </el-table-column>  
    <!-- 其他列 -->  
  </el-table>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [  
        // ... 数据  
      ]  
    };  
  }  
};  
</script>

使用原因：el-table中标题内容过长，设置隐藏，并鼠标悬停可以显示内容

用到知识点：html中的title和css的样式

关键代码：

css设置

/deep/ .el-table th.el-table__cell > .cell {
  border: 1px solid red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

html

 <el-table-column
            prop="product"
            :label="$t('projectMgr.table.product')"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <el-tooltip
                :content="$t('projectMgr.table.product')"
                placement="top"
              >
                <span>{{ $t('projectMgr.table.product') }}</span>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.isProductFamilyManagementEnabled === 1"
                type="success"
                >{{ $t('projectMgr.duoPro') }}
              </el-tag>
              <el-tag v-else>{{ $t('projectMgr.danPro') }}</el-tag>
            </template>
          </el-table-column>