element-ui在表格里插入图片或者链接等

element-ui在表格里插入图片或者链接等

最近在项目中遇到一个要求，需要在表格里插入图片或者显示链接之类的，如果按照下面的方式写

<el-table-column
                label="博客"
                width="150">
                    <el-link type="primary" @click="seeblog(scope.row)">查看详情</el-link>
                
            </el-table-column>

那么他就会在每行显示一样的链接，就不能动态获得数据信息；

经过我的查询和询问，发现了以下方法，写一个template的插件

在template里面就可以写其他插件，例如照片，链接或者按钮，我这里使用的链接

<el-table-column
                label="博客"
                width="150">
                <template slot-scope="scope">
                    <el-link type="primary" @click="seeblog(scope.row)">查看详情</el-link>
                </template>
            </el-table-column>

一下对上方代码做出解释

slot-scope我理解的是储存了表格的信息

@click表示的点击事件

seeblog是我自己定义的函数

scope.row是我给函数做的传参，里面传的是当前表格当前行的所有信息

然后就可以对seeblog函数里面实现对数据的其他操作

这里给出我写的插入的其他组件

<el-table-column
                label="操作">
                 <template slot-scope="scope">
                    <el-button type="primary" plain size="small" @click="editit(scope.row)">编辑</el-button>
                    <el-button type="info" plain size="small" @click="funcresetVisible(scope.row)">重置密码</el-button>
                    <el-button type="danger" plain size="small" @click="funcdemember(scope.row)">删除</el-button>
                </template>
                
            </el-table-column>

这里展示的插入的是按钮操作

在发现这个方法之前，我使用的表格自带的的row-click事件，可以触发表格每行的点击事件

里面可以传一个row参数获得当前行的信息，这也是一个获得行信息的方法

代码如下

<el-table
        :data="tableData"
        border
        @row-click="rowid"
        row-key="id"
        style="width: 100%">

rowid(row){
            console.log(row);
            }

<el-table-column
                label="操作">
                    <el-button type="primary" plain size="small" @click="editit(scope.row)">编辑</el-button>
                    <el-button type="info" plain size="small" @click="funcresetVisible(scope.row)">重置密码</el-button>
                    <el-button type="danger" plain size="small" @click="funcdemember(scope.row)">删除</el-button>
                
                
            </el-table-column>

这样也可以获得当前行的方法，然后对数据进行操作。

如果按照这个方法来对数据进行操作，点击按钮，就会触发按钮的点击和表格的点击，（冒泡事件），由于冒泡的原因，就会出现很多很奇葩的bug，所以不建议使用。建议使用第一种。