<template>
  <GPage bg>
    <div>
      <div class="table">
        <Button class="button"
                @click="add">Add</Button>
        <Table :columns="columns"
               :data="data"
               class="table-fixbug"></Table>
      </div>
    </div>
  </GPage>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          render: (h, { row, index }) => {
            return h('Input', {
              props: {
                value: row.name
              },
              on: {
                input: val => {
                  this.data[index].name = val
                }
              }
            })
          }
        },
        {
          title: '爱好',
          key: 'hobby',
          render: (h, { row, index }) => {
            return h('Select', {
              props: {
                value: row.hobby
              },
              on: {
                'on-select': val => {
                  this.data[index].hobby = val
                }
              }
            },
            this.options.map(item => {
              return h('Option', {
                props: {
                  value: item,
                  label: item
                }
              })
            })
            )
          }
        },
        {
          title: '职业',
          key: 'job',
          render: (h, { row, index }) => {
            return h('Input', {
              props: {
                value: row.job
              },
              on: {
                input: val => {
                  this.data[index].job = val
                }
              }
            })
          }
        },
        {
          title: 'operation',
          key: 'operation',
          render: (h, { row, index }) => {
            return h(
              'a',
              {
                on: {
                  click: () => {
                    this.data.splice(index, 1)
                  }
                }
              },
              'Delete'
            )
          }
        }
      ],
      data: [
        {
          name: '',
          hobby: '',
          job: ''
        }
      ],
      options: ['电影', '游戏', '看书']
    }
  },
  methods: {
    add () {
      const addData = {
        name: '',
        hobby: '',
        job: ''
      }
      this.data.push(addData)
    }
  }
}
</script>
<style lang="less" scoped>
.table {
  text-align: left;
}
.button {
  margin-bottom: 20px;
}
.table-fixbug {
  overflow: visible;
}
</style>

测试后的iview的表格的更多相关文章

  1. UI测试后生成测试报告，利用shell脚本上传svn

    ui测试后生成测试报告,把报告保存在某一个固定路径 shell脚本把这个报告上传 #!/bin/bash -ile #svn下载文件 #svn checkout http://svn.xxx.com/ ...

  2. 关于Activity启动模式(launchMode)和intent设置测试后 发现和网上说的不符 是不是我错了 求解

    看了很多关于Activity启动模式(launchMode)和intent设置intent.setFlags (Intent.FLAG_ACTIVITY_NEW_TASK);发现网上说的和我测试结果 ...

  3. 使用 iview Table 表格组件修改操作的显示隐藏

    使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...

  4. ret.data[0]._highlight = true iview table表格高亮

    ret.data[0]._highlight = true iview table表格高亮

  5. 适用于iview的表格转Excel插件

    在网上找的一个表格转excel插件,经过修改后使其适用于iview中的table组件 let idTmr; const getExplorer = () => { let explorer = ...

  6. UAT测试后上线出现问题的引起的思考

    最近公司有一个外部项目上线了,虽然我没有参与这个项目,仅仅只是作为一个旁观者,但是关于用户的UAT测试的问题,不得表达下我的看法, 在上线之前进行了近一个月的UAT测试,测试完成后进入了正式上线阶段. ...

  7. jmeter性能测试前及测试后

    压测前:           1.压力测试两种场景:                    1)单场景,压测单个接口. 2)混合场景,多个接口关联压测. 2.压测时间:                ...

  8. iview+vue 表格中添加图片

    开门见山,话不多说,要在表格中添加图片,可以使用td: <table " width="100%"> <tr class="tr-style ...

  9. iview+vue 表格任一项实现鼠标划上显示内容

    在新版本的iview中,表格新增了tooltip功能: 但做项目时并不是新的iview版本,又不想升级,如何才能实现当内容过多鼠标划上显示内容?下边是我做项目时的改动: { // fixed: 'le ...

随机推荐

  1. spring boot web 开发及数据库操作

    推荐网站http://springboot.fun/ 1.json 接口开发 2.自定义 filter 3.自定义 property 4.log 配置 5.数据库操作 6.测试

  2. Office customUI中如何动态更新控件标题和图标？

    本例,在Excel右键菜单中创建一个按钮,按钮的标题使用getLabel动态获取,图标使用getImage动态获取. customUI XML代码: <customUI xmlns=" ...

  3. Xcode查看iOS崩溃与崩溃日志分析

    一.造成崩溃的原因 1.代码中存在bug 2.Watchdog 超时机制 3.用户强制退出 4.低内存终止 5.其他违法系统规则的操作,大部分是内存问题 二.崩溃的类型 1.信号错误类 (1)EXC_ ...

  4. 国内外主流的三维GIS软件

    我国GIS经过三十多年的发展,理论和技术日趋成熟,在传统二维GIS已不能满足应用需求的情况下,三维GIS应运而生,并成为GIS的重要发展方向之一.上世纪八十年代末以来,空间信息三维可视化技术成为业界研 ...

  5. K3CLOUD表关联

    销售订单关联发货通知单 销售订单表 T_SAL_ORDER A T_SAL_ORDERENTRY B T_SAL_ORDERENTRY_LK C 发货通知单表 T_SAL_DELIVERYNOTICE ...

  6. [Linux] Ubuntu 配置nfs

    安装NFS Server: 1. 执行命令 "$ sudo apt-get install nfs-kernel-server",安装nfs server 端 2. 创建需要用来分 ...

  7. spring boot 配置文件properties和YAML详解

    spring boot 配置文件properties和YAML详解 properties中配置信息并获取值. 1:在application.properties配置文件中添加: 根据提示创建直接创建. ...

  8. [LC] 152. Maximum Product Subarray

    Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...

  9. python2查找匹配数据及类型转换

    判断一个字符是否包含在另一个字符串中,如果包含,但是数据类型不同,需要进行数据类型转换 下面这个是针对python2

  10. H5页面如何引入vConsole

    vConsole github地址vConsole 是腾讯开源的项目,这就简单的介绍一下使用 使用npm引入vconsole.min.js下载 vConsole 的最新版本.(不要直接下载 dev 分 ...