表格头部添加*号[Element Warn][TableColumn]Comparing to render-header, scoped-slot

343 阅读1分钟

el-table-column警告:

[Element Warn][TableColumn]Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.

image.png

原因是期望交期和采购开发前面需要加一个*号

所以给el-table-column加了:render-header="renderHeader"

            <el-table-column label="期望交期" min-width="160" :render-header="renderHeader" />
      // 期望交期和采购开发,表头添加 *
      renderHeader(h, { column }) {
        return h('div', [
          h('span', { style: { color: 'red', marginRight: '5px' } }, '*'),
          h('span', column.label),
        ])
      }

控制台提示警告

解决:使用Scoped Slot

image.png

可以使用官网提供的具名插槽来渲染表格头部

            <el-table-column min-width="160">
              <template #header>
                <span style="color: red">*</span>
                期望交期
              </template>
            </el-table-column>

页面效果一样,控制台清爽无警告