slot-scope scope.row

白嫖leader

于 2021-05-30 13:23:05 发布

阅读量272

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：前端 vue

本文链接：https://blog.csdn.net/ksjdbdh/article/details/117397240

笔记专栏收录该内容

82 篇文章

订阅专栏

本文展示了如何在Vue项目中利用Element UI组件库创建一个包含日期、姓名和地址列的表格，并实现点击地址列显示Tag的交互功能。通过修改`@click`事件参数，可以更精确地传递行数据。

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

新建一个.vue文件

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column label="地址">
          <template slot-scope="scope">
              <el-tag type="success" @click="shijian(scope)">{{scope.row.address}}</el-tag>
          </template>
      </el-table-column>
    </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods:{
        shijian:function(things){
            console.log(things)
        }
    }
  }
</script>

运行的结果如下：
在这里插入图片描述

将第十二行改为

<el-tag type="success" @click="shijian(scope.row)">{{scope.row.address}}</el-tag>

结果如下：

在这里插入图片描述