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

最新推荐文章于 2024-05-27 09:36:42 发布
最新推荐文章于 2024-05-27 09:36:42 发布
阅读量3.7k 收藏 7
点赞数
文章标签： avue表格图标 icon 列自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44770377/article/details/103370525
版权

该功能对表格实现列自定义即可。
在这里插入图片描述
在对应的文件下\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 clas
最低0.47元/天 解锁文章
指标满载
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
laravel 实现根据字段不同值做不同查询
10-16
今天小编就为大家分享一篇laravel 实现根据字段不同值做不同查询，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件之Tooltip的示例代码
12-29
前言 本文主要Alert 组件的大致框架， 提供少量可配置选项。 旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息。 模板结构 <template> <div xss=removed> <span ref=trigger> <slot> </slot> </span> <div class=tooltip v-bind:class={ 'top': placement === 'top', 'left': placement === 'left', 'righ
avue设置表格显示图片
深蓝旭的博客
05-14 3956
加上这两个属性就可，不过prop要原本就是图片链接哦！ { label:"头像", prop:"icon", listType:'picture-img', type:"upload", rules:[{ required:true, message:"请输入头像", ...
探索Avue：低代码前端框架的高效开发指南
最新发布
m0_54340021的博客
05-27 682
本文深入探讨了基于Element-plus的低代码前端框架Avue，它通过JSON配置方式简化了页面开发流程，极大提升了开发效率。文章详细介绍了Avue的crud配置项，包括option、column和group的配置方法，以及如何使用不同类型的输入控件，如基础输入框、下拉选择框、时间控件、上传图片框等。此外，还介绍了如何集成富文本编辑器等第三方组件。希望本文能帮助开发者快速上手Avue，创造出更多优秀的前端应用。
Avue前端控件大全和表格属性
热门推荐
　　　 　　　　　　　　　　　　　　 　　　　　 寥寥一生......
07-25 1万+
// 表格属性 // width: “100%”,//表格宽度 // calcHeight: “auto”,//表格高度差（主要用于减去其他部分让表格高度自适应） // height: “auto”,//表格高度 // maxHeight: “auto”,//表格最大高度 // border: true,//是否显示表格边框 // expand: false,//是否展开折叠行 // index:...
使用avue图标选择器出现图标无法显示解决
qq_43532275的博客
11-07 1897
avue-icon-select avue-input-icon 图标选择器搜索框是否可用情况
avue 表单绑定值；avue表单项根据某项的值去联动显隐或是联动下拉数据；avue select切换与另外一个select的options联动
killerdoubie的博客
07-11 2065
avue 表单绑定值；avue表单项根据某项的值去联动显隐或是联动下拉数据
django filter过滤器实现显示某个类型指定字段不同值方式
09-16
在本场景中，我们关注的是如何使用`django filter`来实现显示某个类型指定字段的不同值。`django filter`允许我们在模板中进行数据的筛选和处理，而`ecs_model_field_distinct`是一个自定义过滤器，用于获取模型...
vue根据条件不同显示不同按钮的操作
10-15
例如，假设我们有一个表格，其中每行数据都有一个 `isDeleted` 属性，这个属性可能的值是 0 或 1，表示商品是否被下架。我们可以创建一个模板片段来显示不同状态的按钮： ```html v-if="scope.row.isDeleted ==...
django admin 根据choice字段选择的不同来显示不同的页面方式
12-17
在`tip/tip.js` 文件中，我们看到JavaScript代码用于根据`tip_type`字段的值来显示或隐藏页面元素。当`tip_type`的值为'content'时，显示内容字段，隐藏图片和裁剪字段；反之，则显示图片和裁剪字段，隐藏内容字段。...
根据字段值批量输出shp
09-20
3. **查看字段**：在图层属性或属性表中查看字段信息，找到你需要根据其值进行筛选的字段。 4. **创建模型**：在ArcGIS中，可以使用ModelBuilder工具来构建批量处理的流程。在“ArcToolbox”中找到“模型建设者”，...
avue——el-tooltip提示（form和crud）
he3236220的博客
04-16 2777
crud 在option>column中设置headerslot: true, slot=“对应字段名Header” 添加下面的代码设置tip <template slot="isPowerHeader" slot-scope="{ column }"> <label>{{ column.label }}</label> <el-tooltip class="item" effect="dark" placement="bottom">
前端那些事20240201-前端那些事-avue2 表格行配置 行点击方法
qq_41632427的博客
03-15 390
【代码】前端那些事20240201-前端那些事-avue2 表格行配置 行点击方法。
AVUE 获取显隐列字段
jdk1994的博客
05-25 2844
近期在需要做一个导出功能，业务人员希望，导出的字段和前台显示的结果一致，故而需要获取显隐列的字段信息； 很遗憾在avue的官方文档中并没有直接找到对应的信息； <avue-crud ref="crud" :data="dataList" :option="option" :summary-method="getSummaries" :show-column.sync="showColumn" :table-loading="loading" :page.sync="page
Vue组件之Tooltip
weixin_34392843的博客
10-17 5903
前言 本文主要Alert 组件的大致框架， 提供少量可配置选项。 旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息。 模板结构 <template> <div style="position:relative;"> <span ref="trigger"> ...
Avue：avue-crud组件表头复制
weixin_44132840的博客
01-23 404
1.user-select 属性。该规定是否能选取元素的文本。
根据不同的点击内容，展示数据（event）
maoxiaohei_的博客
04-15 298
1.第一步，先从后台获取到你要用的id 2.第二步，循环出来所有数据,渲染到页面上 3.第三步，给你要点击的绑定上监听事件，绑定id 4.第四步，根据你点击的id，再拿去请求接口调用数据 <view> <!--transList里面有我们要用的仪表id,首先先循环它--> <!--绑定一个点击监听事件 selectTransId,到这一步先看methods的内容,和上面的events知识点--> <view v-for="item in ..
vue根据值显示不同字段
06-03
可以使用v-if或v-show指令实现根据值显示不同字段，具体实现方法如下： 使用v-if指令： ```html <template> <div> <div v-if="value === 'A'"> 显示字段A </div> <div v-else-if="value === 'B'"> 显示字段B </div> <div v-else> 显示其他字段 </div> </div> </template> <script> export default { data() { return { value: 'A' } } } </script> ``` 使用v-show指令： ```html <template> <div> <div v-show="value === 'A'"> 显示字段A </div> <div v-show="value === 'B'"> 显示字段B </div> <div v-show="value !== 'A' && value !== 'B'"> 显示其他字段 </div> </div> </template> <script> export default { data() { return { value: 'A' } } } </script> ``` 以上代码中，根据value的不同值，显示不同的字段。其中，使用v-if指令可以在条件不满足时，直接删除对应的DOM元素，而使用v-show指令只是将对应的DOM元素的display样式设置为none。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值