<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. Python基本了解

    1. 计算机基础知识 CPU : 人类的大脑,运算处理问题 内存 : 临时储存数据,断点数据就会消失,存储数据快 硬盘 : 永久存储各种数据,相对于内存存储速度慢 操作系统 : 本质上是一个软件,用于 ...

  2. mysql 优化配置和方面

    MySQL性能优化的参数简介 公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL 的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20 ...

  3. android greendao的外部封装不太友好。

    https://github.com/greenrobot/greenDAO 下载下官网的示例,有完整的封装版本,但自已封装是碰到很多问题. 因greenDao的Master和Session中很多方法 ...

  4. Activiti 5.16 用户手册

    http://www.mossle.com/docs/activiti/index.html#bpmnNoneStartEvent   Activiti 5.16 用户手册

  5. 前端js代码以备不时之需

    //获取id元素信息let getId = (args) => { return document.getElementById(args);} //获取类名元素let getClassName ...

  6. drf分页组件补充

    drf偏移分页组件 pahenations.py from rest_framework.pagination import LimitOffsetPagination class MyLimitOf ...

  7. TCP\IP协议簇-分层模型

    OSI 模型   数据单元 层 功能 主机层 Data(数据) 7. 应用层 网络进程到应用程序. 6. 表示层 数据表示形式,加密和解密,把机器相关的数据转换成独立于机器的数据. 5. 会话层 主机 ...

  8. python 前端素材提供

    小图标素材:http://fontawesome.dashgame.com/

  9. Catch That Cow （BFS)

    题目: Farmer John has been informed of the location of a fugitive cow and wants to catch her immediate ...

  10. Uber刷单，刷出中国的人性劣根？

         美国叫车应用Uber国际化之路一直挺顺利的,融资也挺顺利的,他们现在很有钱,最新总融资金额达到100亿美元,创下美国非上市高科技公司的融资纪录.全新的商业模式,以及优质的客户体验,让Uber ...