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

该功能对表格实现列自定义即可。

在对应的文件下\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">
                  <i class="el-icon-folder-delete" style="font-size: 16px; margin:0 5px;color: red;"></i>
                </el-tooltip>
                <el-tooltip v-show="scope.row.sfyd==1" class="item" effect="dark" content="已读" placement="top-start">
                  <i class="el-icon-folder-opened" style="font-size: 16px; margin:0 5px;color: #67C23A;"></i>
                </el-tooltip>
                <el-tooltip v-show="scope.row.sfhf==1" class="item" effect="dark" content="已回复" placement="top-start">
                  <i class="el-icon-edit-outline" style="font-size: 16px; margin:0 5px;color: #3a7bbe;"></i>
                </el-tooltip>
                <el-tooltip v-show="scope.row.sfsc==1" class="item" effect="dark" content="已收藏" placement="top-start">
                  <i class="el-icon-star-off" style="font-size: 16px; margin:0 5px;color:#8a2be2;"></i>
                </el-tooltip>
                <el-tooltip v-show="scope.row.sfdb==1" class="item" effect="dark" content="已转待办" placement="top-start">
                  <i class="el-icon-suitcase" style="font-size: 16px; margin:0 5px;color:  #9a6e3a;"></i>
                </el-tooltip>
              </template>

通过v-show来实现需求显示的图标即可。效果如下：

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