前端增加表头字段角标

MicaQian

于 2023-05-26 16:05:56 发布

阅读量312

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qxy15997826736/article/details/130888877

版权

该代码段展示了在Vue.js中如何使用`renderheader`函数自定义`el-table-column`的头部渲染，包含一个`el-tooltip`组件用于显示顶部提示。内容涉及到列标签`column.label`，样式控制如`width`、`label-class-name`，以及根据数据动态改变文字颜色的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    renderheader(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: '',
              placement: 'top',  // 悬停内容展示的位置
              effect:'light'
            }
          },
          [h('span', { class: { 'icon-jiaobiao': true }})] // 图标
        )
      ]
    },

	<el-table-column prop="DELAYDAYS" label="字段" width="220"   label-class-name="labelClass"
				show-overflow-tooltip align="right" :render-header="renderheader">
					<template slot-scope="scope">
						<div v-if="scope.row.INVSTATE != '1'" :style="{ color: scope.row.DELAYDAYS <= 30  ? '#606266 !important' : 'red' }">
						{{ scope.row.DELAYDAYS }}
						</div>
					</template>
				</el-table-column>