<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. Idea mac

    Idea 的破解 http://idea.lanyus.com/ Idea 的常用配置 模版及模版的使用 创建 JavaWeb 或 Module 关联数据库 版本控制 断点调试 配置 maven 其他 ...

  2. Linux 杀死进程方法大全(kill,killall)

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志.   首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令:   # kill -pid   注释:标准的kill命令通常 ...

  3. IPC之——信号量集(多个信号量)

    如果两个进程不仅需要同步,还要保证先后执行顺序,就要用两个信号量(互斥锁)来解决 //栅栏模型:实现以下框架中的四个子进程 所有进程做完任务后 在一起执行下一次  #include <stdio ...

  4. 吴裕雄--天生自然 HADOOP大数据分布式处理：CenterOS 7 多台物理机、虚拟机相互桥连接ping通，并且能够成功连接外网

    选择用于桥接模式下的虚拟交换机,并且要选择对应的有线或者无线的网卡,如果主机是插网线联网的,那就选择有线网卡,如果主机是连无线网络的就选择无线网卡.Realtek PCIe GBE Family Co ...

  5. python项目中对mysql数据库进行配置，并进行连接测试

    在settings.py中配置mysql数据库进行相关配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME ...

  6. django框架进阶-form组件-长期维护

    ##################     form组件做了什么事情?      ####################### 之前web开发的模式,以注册为例 1,要有一个注册页面,然后有一个f ...

  7. PCIe的事务传输层的处理（TLP）

    主要从以下几个方面解决: 1.TLP基本的概念: 2.寻址定位与路由导向 3.请求和响应机制 4.虚拟通道机制 5.数据完整性 6.i/o,memory,configuration,message r ...

  8. 整理struct sockaddr和struct sockaddr_in

    struct sockaddr定义在/usr/include/linux/socket.h struct sockaddr { unsigned short ss_family; - } struct ...

  9. springboot中使用异步的常用两种方式及其比较

    一般对于业务复杂的流程,会有一些处理逻辑不需要及时返回,甚至不需要返回值,但是如果充斥在主流程中,占用大量时间来处理,就可以通过异步的方式来优化.实现异步的常用方法远不止两种,但是个人经验常用的,好用 ...

  10. 分布式文件系统与HDFS

    HDFS,它是一个虚拟文件系统,用于存储文件,通过目录树来定位文件:其次,它是分布式的,由很多服务器联合起来实现其功能,集群中的服务器有各自的角色. HDFS 的设计适合一次写入,多次读出的场景,且不 ...