avue框架表格根据字段值需求显示不同图标或点击事件

柔光的暖阳◎ 2023-06-19 01:57 5阅读 0赞

该功能对表格实现列自定义即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
在对应的文件下\\lsfw-ui\\src\\const\\crud\\admin\\sysxxfsjl.js的对应需求的字段加上slot:true属性

然后在对应的vue文件中\\src\\views\\admin\\sysxxfsjl.vue自定义需要展示的内容，还可以写上样式。

<template slot="fszt" slot-scope="scope" >
 <el-tooltip v-show="scope.row.sfyd==0" class="item" effect="dark" content="未读" placement="top-start">
 
 </el-tooltip>
 <el-tooltip v-show="scope.row.sfyd==1" class="item" effect="dark" content="已读" placement="top-start">
 
 </el-tooltip>
 <el-tooltip v-show="scope.row.sfhf==1" class="item" effect="dark" content="已回复" placement="top-start">
 
 </el-tooltip>
 <el-tooltip v-show="scope.row.sfsc==1" class="item" effect="dark" content="已收藏" placement="top-start">
 
 </el-tooltip>
 <el-tooltip v-show="scope.row.sfdb==1" class="item" effect="dark" content="已转待办" placement="top-start">
 
 </el-tooltip>
 </template>

通过v-show来实现需求显示的图标即可。效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

点击事件就一样的。给按钮加上@click事件就好了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019120316391685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191203164417456.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw==,size_16,color_FFFFFF,t_70