element-ui中表格插槽语法的使用

最新推荐文章于 2025-04-15 17:07:08 发布

如果决定要走又何必挽留

最新推荐文章于 2025-04-15 17:07:08 发布

阅读量731

点赞数

分类专栏：后台管理系统文章标签： ui vue.js elementui

本文链接：https://blog.youkuaiyun.com/qq_59076775/article/details/132093080

版权

后台管理系统专栏收录该内容

38 篇文章

订阅专栏

文章介绍了如何在ElementUI的el-table中使用插槽语法添加操作列，包括查看和编辑按钮，并通过slot-scope获取当前行数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实例:

<el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
        <el-table-column prop="addtr" label="地址"> </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>

分析代码:

直接另起一行,直接默认插槽增加两个按钮,通过slot-scope传入当前行的数据。