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>
相关推荐
丙寅21 小时前
微信小程序反编译遇到 TypeError: _typeof3 is not a function
开发语言·javascript·ecmascript
青衫码上行21 小时前
【Java Web学习 | 第十篇】JavaScript(4) 对象
java·开发语言·前端·javascript·学习
silence_xiang1 天前
【React】首页悬浮球实现,点击出现悬浮框
前端·javascript·react.js
隔壁的大叔1 天前
由于vite版本不一致,导致vue组件引入报错
javascript·vue.js
超级罗伯特1 天前
大屏自适应,响应式布局,亲测有效
前端·javascript·html·大屏·驾驶舱
青衫码上行1 天前
【Java Web学习 | 第九篇】JavaScript(3) 数组+函数
java·开发语言·前端·javascript·学习
我是ed.1 天前
vue2 使用 cesium 展示 TLE 星历数据
vue.js·cesium
前端Hardy1 天前
HTML&CSS&JS:赛博木鱼
前端·javascript·css
有点笨的蛋1 天前
从值拷贝到深拷贝:彻底弄懂 JavaScript 的堆与栈
前端·javascript
有点笨的蛋1 天前
从零掌握 Ajax:一次请求带你读懂异步数据加载原理
前端·javascript·ajax