el-table在动态渲染列的时候，使用slot自定义单元格时，prop属性键入失效

扶苏1002

于 2024-09-14 13:43:15 发布

阅读量40

点赞数 1

分类专栏： ElementUI 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44741577/article/details/142256325

版权

ElementUI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

el-table在动态渲染列的时候，使用slot自定义单元格时，prop属性键入失效

原因：使用自定义slot，循环体中所有的列都是自定义slot，即时v-if绑定在template也不行

<el-table-column
  v-for="col in dataSource.cols"
  :key="col.prop"
  :prop="col.prop"
  :label="col.label"
  :width="col.width"
  align="center"
  show-overflow-tooltip
>
  <!-- 使用自定义slot，循环体中所有的列都是自定义slot，不会默认键入prop即时v-if绑定在template也不行-->
  <template slot-scope="{ row }">
    <span
      v-if="col.prop === 'pairingDate'"
      @click="openDetailTable(row)"
      style="color: #1890ff; cursor: pointer"
      >{{ row.pairingDate }}</span
    >
    <!-- 必须使用v-else，否则单元格会出现空白 -->
    <span v-else>{{ row[col.prop] }}</span>
  </template>
</el-table-column>