iview中的Table中渲染Icon

最新推荐文章于 2020-11-15 16:21:00 发布
最新推荐文章于 2020-11-15 16:21:00 发布
阅读量943 收藏 1
点赞数
分类专栏： iview使用经验 文章标签： vue iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45426989/article/details/102963730
版权
在iview的Table组件中，常用于展示带有操作的后台系统表格。本文介绍如何渲染Icon作为操作按钮，并详细说明了点击按钮后，如何在表格行内动态显示输入框或下拉框，实现数据的编辑与保存功能，从而实现表格中指定列值的修改。
摘要由CSDN通过智能技术生成

iview中的Table中渲染Icon

在一些表格的末尾，一般会有一些操作，这种操作在后台系统中是很常见的，可以自行的渲染Button，或者Icon来当做按钮。那么在table中的具体的做法如下：

{
   
          title: '操作',
          key: 'action',
          align: 'left',
          width: '10%',
          render: (h, params) => {
   
            return h('div', [
              h(
                'div',
                {
   
                  class: 'icon-div',
                  on: {
   
                    click: () => {
   
                      this.onProductUpdate(params.row)
                    }
                  }
                },
                [
                  h('i', {
   
                    class: 'fa fa-eye table-icon'
                  })
                ]
              ),

              h(
                'poptip',
                {
   
                  props: {
   
                    title: '请确认是否删除 [ ' + params.row.name + ' ] ?',
                    placement: 'left',
                    confirm: true
                  },
                  style: {
   
                    marginRight: '3px',
                    textAlign: 'left'
                  },
                  on: {
   
                    'on-ok': res => {
   
                      this.onDelete(params.row.id)
                    }
                  }
                },
                [
                  h(
                    'div',
                    {
   
                      class: 'icon-div'
                    },
最低0.47元/天 解锁文章
风雪夜照无眠
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iView的树的render函数渲染-多选框、图标、图片
leilei__66的博客
08-08 2388
iView的树的render函数渲染 官网：渲染函数& JSX 使用强大的 Render 函数可以自定义节点显示内容和交互，比如添加图标，按钮等。 Render 函数的第二个参数，包含三个字段： root ：树的根节点 node ：当前节点 data ：当前节点的数据 通过合理地使用 root、node 和 data 可以实现各种效果，其中，iView 给每个节点都设置了一个 nodeKey 字段，用来标识节点的 id。 两种写法： Render 函数分两种，一种是给当前树的每个节点都设置同
iview table高度动态设置方法
08-27
iview Table 高度动态设置方法 iView 是一个基于 Vue.js 的组件库，它提供了许多实用的组件来帮助开发者快速构建应用程序。其中，iView Table 是一个非常常用的组件，用于显示表格数据。然而，在使用 iView Table ...
iview Table组件渲染操作按钮, render 渲染icon图标更改方法
weixin_34252090的博客
07-13 5580
问题描述: Table组件操作,iview自带的icon并不能满足我的需要,根据render函数的属性,自己写了几种方式,后续会继续添加 1, 使用iview自带的icon图标 这个不方便改变他们的icon类型,使用受到局限 复制代码 let products: any = { columns: [{ title: '操作', key: 'Ac...
【vue-iview】iview Table组件渲染操作按钮, render 渲染icon图标更改方法
WANGHUAN-
03-25 7115
1, 使用iview自带的icon图标 这个不方便改变他们的icon类型,使用受到局限 复制代码 let products: any = { columns: [{ title: ‘操作’, key: ‘Action’, width: 150, render: (h, params) => { return h(‘div’, [ h(‘Icon’, { props: { type: ‘tra...
iview 的table 加矢量图icon的方式
Quiet_123的博客
11-09 2891
iview+table+icon实现table中某一列添加图标。自己项目里遇到的问题，记录一下。 注意：table里的render函数的使用。 第一步：render函数 { title: '站名', key: 'name', // align:"c...
iview render渲染icon switch img。。。
lz的博客
05-28 1968
下面是渲染 按钮 图片 图标 开关的写法 { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ ...
iview table里面加icon iview他变了icon滑过加Tooltip 文字提示
张火火
10-16 1181
{ title: '操作', key: 'action', align: 'center', width: 150, render: (h, params) => { let arr = []; arr.push( ...
iview Table列表中增加字体图标
Lucky铂爵
11-04 574
效果图 vue.js { title: '员工姓名', key: 'Name', width: 150, align: 'center', render: (h, params) => { return h('div', [ h('span', params.row.Name), h('Icon', {
Iview Table组件中各种组件扩展的使用
10-17
在本文中，我们将深入探讨Iview Table组件中的各种组件扩展，以及如何在实际应用中实现多选框选中与禁选设置，以及在Table组件中点击Icon弹出Poptip的两种方法。Iview Table是基于Vue.js的UI组件库，提供了丰富的...
iview的table组件自带的过滤器实现
12-10
iview的table组件自带的过滤器实现 iview框架的table组件自带的过滤器的使用方法： [removed] export default { data () { return { columns: [ { title: 'Name', key: 'name' }, //过滤器 //通过给 ...
iview的table组件怎么引入icon图标
teddyWithPig的博客
09-12 2292
iview的table组件怎么引入icon图标 1.使用iview自带的icon图标 columns: [{ title: '操作', key: 'Action', width: 150, render: (h, params) => { return h('div', [ h('Icon', { props: { typ
Vue中render方法的使用
07-05 1万+
先说一下对官网上demo的个人理解:<!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="vue.js"></script> </head> <body> <div id="app"> <child :level="1"> hello world </child>
关于iview的使用心得
我在明天的盼望
12-07 8804
使用iview一定会用到render，毕业设计项目，赶鸭子上架，经过一番纠结，最终决定使用iview，感觉入坑了，bug很多，资料好少，用的人实在太少了，还有官方的各种解释各种不清楚，哎。。。。但是已经开始了这么多，就不能放弃！加油吧。。。。 render函数的解释在官方文档里写的很清楚，但是我是小白啊，经过一夜的奋斗，终于弄清楚了它的使用，不是大神，不敢说源码什么的全部清楚。。。哈哈哈。。。 我的
iview table里的render的一些数据格式
qq_42894952的博客
11-02 1万+
{ title:'操作', align: 'center', width:120, render:(h,params)=&amp;amp;gt;{ return h('div',[ h('span', { style:{ 'margin-right':'10px', '...
vue之使用iview插件实现列表展示或table展示
热门推荐
Charles_Tian的博客
08-23 3万+
iview学习地址：https://www.iviewui.com/ 1.iview了解； 开发过项目后台管理系统的人都知道，很多数据都是呈一个列表的形式展现给管理员，或者以各种图展现。就比如，用户数据和一些优惠券信息等都需要以一个列表的形式展现给管理员；再就是一些用户的消费情况会以曲线图、折线图、柱状图等展示给管理员，用于用户分析，方便推荐。而在开发后台管理系统中，基本上都是很多前端人员参与...
iview的icon组件怎么添加点击事件
aaa333qwe的博客
12-13 9356
原生事件要加修饰符。 这样写没反应？？？ 答案在上面。
iview 表格组件 添加图片
认真和努力总没有错
04-13 5361
{ title: "商品图", key: "photo", render: (h, params) =&gt; { console.log(params.row) return h('div', { attrs: { style: 'width: 40px;height: 40px;' }, }, [ h('img', { props: { ...
iView表格（table）渲染（render）
梓鸿
11-15 1474
render 1、语法 以下分别定义了：标签名称，(样式，事件等综合内容)，显示内容 render: (h, params) => { return h('span', { style: { color: '#FF7D41' }, on:...
iview的Table如何添加按钮以及操作
weixin_43021174的博客
09-20 1万+
&lt;Table border ref="selection" :stripe="true" :columns="columns" width="97%" height="400" :data="data1"&gt; &lt;/Table&gt; { title: '消息状态', // '推送频率',
iview中table清除选中项
最新发布
07-17
在 iView 中，要清除表格（Table）中的选中项，可以通过以下步骤进行操作： 1. 首先，你需要在表格的数据源中添加一个 `selected` 属性来表示是否被选中。例如，如果你的数据源是一个数组，可以为每个数组项添加一个 `selected` 属性，默认值为 `false`。 2. 在表格的模板中，使用 `row-selection` 属性来启用行选择功能，并将 `selected` 属性绑定到数据源中的 `selected` 属性。例如： ``` <Table :data="tableData" :row-selection="{ selected: tableData.filter(item => item.selected), onChange: handleSelectionChange }"> <Table-column type="selection" width="60"></Table-column> <Table-column prop="name" label="Name"></Table-column> <Table-column prop="age" label="Age"></Table-column> </Table> ``` 3. 在你的方法中，实现 `handleSelectionChange` 方法来处理选中项的变化。例如，你可以将选中的行存储到一个变量中，并在需要清除选中项的时候将该变量清空。例如： ``` data() { return { tableData: [ { name: 'John', age: 20, selected: false }, { name: 'Jane', age: 25, selected: false }, { name: 'Tom', age: 30, selected: false } ], selectedRows: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; }, clearSelection() { this.selectedRows = []; } } ``` 4. 最后，当你想要清除选中项时，调用 `clearSelection` 方法即可。例如，可以在某个按钮的点击事件中调用该方法。 ``` <Button @click="clearSelection">Clear Selection</Button> ``` 通过以上步骤，你可以在 iView 中清除表格的选中项。希望对你有帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值