最近在使用el-table时经常用到的一些小的需求处理,这里做个记录以便查阅。(截图中用的数据是乱的不要在意)
1、行内文字前面加图标
直接利用slot插槽就可以添加图标了,我这里是直接用img标签引入,用svg应该也是一样的
<el-table-column label="课程文件名" prop="nodeCode" align="left" width="210px">
<template slot-scope="scope">
<img src="../../../views/images/文件夹.png">
{{scope.row.nodeName}}
</template>
</el-table-column>
2、行内路由跳转
解释一下就是,某一行的某一列属性上需要一个点击它就能跳转到另一个页面(类似详情页面)的功能
<el-table-column label="课程文件名" prop="nodeCode" align="left" width="210px">
<template slot-scope="scope">
<router-link :to="{name:'CoursewareDetail',query:{}}">
{{scope.row.nodeName}}
</router-link>
</template>
</el-table-column>
3、行内链接跳转
这是在网上看到的先记录一下
<template slot-scope="scope">
<a :href="'http://'+scope.row.Address"
target="_blank"
class="buttonText">{{scope.row.Address}}</a>
</template>