elementui中table标题和内容插槽
代码
<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>
原文地址:https://blog.csdn.net/grow_/article/details/142869959
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!