el-table template slot-scope=“scope“ 不显示内容

有时候,按以下方法写的el-table的操作列会不显示内容,可用 "template 里面的属性改为 #default="scope"。 重点:【template外围标签el-table-column 加上 key="slot"属性】" 的方法修改。

html 复制代码
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

解决办法代码:

html 复制代码
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100"
      key="slot">
      <template #default="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
相关推荐
小李子呢021117 小时前
前端八股7--- Vue 状态管理工具(vuex和pinia)
前端·javascript·vue.js
Geoking.17 小时前
后端Long型数据传到前端js后精度丢失的问题(前后端传输踩坑指南)
java·前端·javascript·后端
时寒的笔记17 小时前
js7逆向案例_禁止f12打开&sojson打开
开发语言·javascript·ecmascript
stpzhf17 小时前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app
十一.36617 小时前
003-004 虚拟DOM的两种创建方式、虚拟DOM与真实DOM
前端·javascript·html
三声三视17 小时前
React 18 并发渲染实战:useTransition、Suspense 与自动批处理深度解析
前端·javascript·react.js
不会写DN17 小时前
从零打造一个丝滑的 Vue 3 返回顶部组件
前端·javascript·vue.js
牧杉-惊蛰17 小时前
修改表格选中时的背景色与鼠标滑过时的背景色
前端·javascript·css·vue.js·elementui·html
彧翎Pro17 小时前
前端状态管理进化史:从Redux到Zustand的范式转变
前端·javascript
bjzhang7517 小时前
使用 HTML + JavaScript 实现表格滚动效果
前端·javascript·html·表格滚动效果