iview—Table表格render 渲染

Dear 丶 2023-06-04 02:53 25阅读 0赞

1.序号
    2.if判断、a标签
    3.if判断、Input输入
    4.renderHeader自定义列头的点击事件、render的Input点击事件(nativeOn click)
    5.正常列
    6.按钮Button
    7.复选框Checkbox
    8.下拉框Select(遍历list生成选择项)
    9.下拉框Select(枚举生成选择项)

const that = this
    this.columns = [
      {  //1.序号
        type: 'index',
        title : '序号',
        width: 50,
        align: 'center'
      },
      {  //2.if判断、a标签
        title: '操作',
        key: 'action',
        align: 'center',
        fixed: 'left',
        width: 80,
        render: (h, params) => {
          if (this.dataList[params.index].isRptEdit=='1') {
            // 主项和在报告录入环节的不可取消选择
            return h('span', '/');
          } else {
            return h('div', [
              h('a', {
                style: {
                  color: 'blue'
                },
                on: {
                  click: () => {
                    this.unsel(params);
                  }
                }
              }, '取消选择')
            ])
          }
        }
      },
      {  //3.if判断、Input输入
        title: '项目名称',
        key: 'itemname',
        width : '200',
        render: (h, params) => {
          if (this.dataList[params.index].isRptEdit=='1') {
            // 在报告录入环节的不可编辑
            return h('span', {
              style: {
                color: '#c5c8ce'
              }
            }, params.row.itemname);
          } else {
            return h('Input', {
              props: {
                type: 'text',
                size : 'small',
                value: this.dataList[params.index].itemname
              },
              on: {
                'on-blur': (event) => {
                  that.dataList[params.index].itemname = event.target.value;
                }
              }
            }, '')
          }
        }
      },
      {  //4.renderHeader自定义列头的点击事件、render的Input点击事件(nativeOn click)
        title: '报告录入人员',
        key: 'rpteditor',
        width : '150',
        renderHeader : (h, params)=> {
          return h('div',[
            h('a',{
              style : {
                color: 'blue'
              },
              on : {
                click: () => { //自定义列头的点击事件
                  this.editMode = 'batch';
                  this.personKey = 'rpteditor'
                  this.showSelPerson = true;
                }
              }
            },params.column.title)
          ])
        },
        render: (h, params) => {
            const row = params.row;
            return h('Input', {
              props: {
                type: 'text',
                size : 'small',
                readonly: true,
                value: this.dataList[params.index].rpteditor
              },
              nativeOn: {
                click: () => {
                  this.editMode = 'one';
                  this.currentRowId = params.index;
                  this.personKey = 'rpteditor'
                  this.showSelPerson = true;
                }
              }
            }, '');
        }
      },
      {  //5.正常列
        title: '当前处理人',
        key: 'currentHandler',
        width : '120'
      },
      {  // 6.按钮Button
        title: '操作',
        key: 'action',
        align: 'center',
        width: 155,
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                size: 'small'
              },
              style: {
                marginRight: '5px',
                fontSize: '12px',
                borderColor: '#5cadff'
              },
              on: {
                click: () => {
                  this.upRow(params)
                }
              }
            }, '上移'),
            h('Button', {
              props: {
                size: 'small'
              },
              style: {
                marginRight: '5px',
                fontSize: '12px',
                borderColor: '#5cadff'
              },
              on: {
                click: () => {
                  this.downRow(params)
                }
              }
            }, '下移'),
            h('Button', {
              props: {
                size: 'small'
              },
              style: {
                marginRight: '5px',
                fontSize: '12px',
                borderColor: '#5cadff'
              },
              on: {
                click: () => {
                  this.delRow(params)
                }
              }
            }, '删除')
          ])
        }
      },
      {  // 7.复选框Checkbox
        title: '主项',
        key: 'must',
        width : '50',
        align: 'center',
        render: (h, params) => {
          return h('Checkbox', {
            props: {
              size : 'small',
              value: this.dataList[params.index].must
            },
            on: {
              'on-change': (e) => {
                this.dataList[params.index].must = e
              }
            }
          }, '')
        }
      },
      { // 8.下拉框Select(遍历list生成选择项)
        title: '文书项目名称',
        key: 'itemname',
        width : '200',
        render: (h, params) => {
          return h('Select', {
            props: {
              value: this.dataList[params.index].itemname, // 获取选择的下拉框的值
              size: 'small'
            },
            on: {
              'on-change': e => {
                this.dataList[params.index].itemname = e // 改变下拉框赋值
              }
            }
          }, this.productTypeList.map((item) => { // this.productTypeList下拉框里的data
            return h('Option', { // 下拉框的值
              props: {
                value: item.id,
                label: item.name
              }
            })
          }))
        }
      },
      { // 9.下拉框Select(枚举生成选择项)
        title: '文书项目名称',
        key: 'itemname',
        width : '200',
        render: (h, params) => {
          return h('Select', {
            props: {
              value: this.dataList[params.index].itemname, // 获取选择的下拉框的值
              size: 'small'
            },
            on: {
              'on-change': e => {
                this.dataList[params.index].itemname = e // 改变下拉框赋值
              }
            }
          },
          [
            h('Option',{
              props: {
                   value: '1'
              }
            },'option1'),
            h('Option',{
                props: {
                    value: '2'
                 }
            },'option2')
          ])
        }
      }
    ]

转载于:https://www.cnblogs.com/qyy1207/p/11611188.html

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview—Table表格render 渲染

1.序号 2.if判断、a标签 3.if判断、Input输入 4.renderHeader自定义列头的点击事件、render的Input点击事件

Dear 丶/ 2023年06月04日 02:53/ 0 赞/ 26 阅读

相关渲染树render tree

CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。 DOM树和CSSOM树连接在一起形

「爱情、让人受尽委屈。」/ 2022年06月13日 13:38/ 0 赞/ 251 阅读

相关 ThreeJs学习笔记——渲染(render)分析

一、前言 ThreeJs 封装了 WebGL 进行渲染时所涉及到的相关概念，如光照，材质，纹理以及相机等。除此之外，其还抽象了场景(Scene)以及用于渲染的渲染器(We

爱被打了一巴掌/ 2022年04月27日 22:16/ 0 赞/ 1512 阅读

相关渲染表格

开发工具与关键技术：vsX 和 jquery 作者：戴怡斌撰写时间：2019.4.16 下面就来看一个渲染表格的案列，表格相信大

╰半夏微凉°/ 2022年04月24日 06:02/ 0 赞/ 307 阅读

相关渲染表格

渲染表格下面我们要做的是查询数据、渲染表格。（开发工具：Visual Studio 2015） ![在这里插入图片描述][watermark_type_ZmFuZ3

冷不防/ 2022年02月04日 11:57/ 0 赞/ 367 阅读

相关 Layui表格渲染

开发工具与关键技术： Visual Studio 2015 – Layui表格渲染作者：廖亚星撰写时间：2019年5 月15 日下面我用Layui插件来渲染代码

缺乏、安全感/ 2022年01月31日 05:49/ 0 赞/ 545 阅读

相关 iview在Table表格中渲染Tooltip文字提示，使用render实现

{ title: '发送范围', key: 'sendRangeName', min

小灰灰/ 2022年01月14日 12:25/ 0 赞/ 1074 阅读

相关 vue渲染render

一、宏观上展现了Vue整体流程： ![vue-render-1.jpg][] Vue推荐在绝大多数情况下使用`template`来创建你的HTML。然而在一些场景中，

朱雀/ 2022年01月06日 08:17/ 0 赞/ 320 阅读

相关 Render渲染函数-深入应用

渲染函数是vue中的一个非常重要的功能。基本在个性化的展示上都会使用到。所以需要对其有较为深入的理解才行。之前写过一篇关于渲染的，算是基础。在随后的使用过程中，发现还需要更

雨点打透心脏的1/2处/ 2021年10月15日 12:21/ 0 赞/ 355 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 543 阅读