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>
相关推荐
一 乐38 分钟前
汽车租赁|基于SprinBoot+vue的汽车租赁系统(源码+数据库+文档)
java·数据库·vue.js·游戏·论文·源码·汽车租赁系统
scian221 小时前
微信小程序源码 图书管理系统 万字文档 Springboot vue
vue.js·spring boot·微信小程序
new_一个对象2 小时前
UniApp轻松实现图片放大查看功能
javascript·uni-app·php·电商系统·crmeb
蜕变菜鸟2 小时前
在Uni-app中实现计时器效果
前端·javascript·uni-app
ohMyGod_1233 小时前
打卡55天------图论(并查集)
前端·javascript·算法
编码小哥4 小时前
使用HTML实现贪吃蛇游戏
javascript·html
小刘|5 小时前
关于前端布局的基础知识
开发语言·前端·javascript
格瑞@_@5 小时前
七、SPA单页面实现SEO优化之SSR服务器渲染
服务器·前端·vue.js
HainesFreeman5 小时前
vue devserver proxy设置跨域详解
前端·javascript·vue.js
九号窗口5 小时前
基于vue3和audio封装的简易音频播放器
javascript·vue.js·音视频