<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. 100)PHP,文件上传总代码整理

    首先是我的目录关系: 然后我的html表单代码: <html> <head> <title>Form</title> <meta http-equ ...

  2. Mybatis与Spring整合（纯注解）

    java1.5版本之后开始支持注解,spring*2开始提供注解配置方式,到spring**4后spring推荐使用注解配置 IOC注解(主要作用就是在spring容器中声明一个Bean,同xml中的 ...

  3. centos5.5 下面 lnmp环境遇到的小问题

    A)nginx 启动:/www/nginx/sbin/nginx -c /www/nginx/conf/nginx.conf 查看: ps -ef | grep nginx 停止:强制停止所有Ngin ...

  4. IIC通信控制的AD5259------在调试过程中遇到的奇葩问题

    首先说一下的遇到的问题: 1.AD5259按照SCL是100KHz的情况下,可以正常接收上位机的数据,但是一段时间后,就不能正确的按照时序来走了 原因在于AD5259在接收到上位机的数据后需要一定的响 ...

  5. Skipping MapperFactoryBean with name 'sysUserMapper' and 'com.buding.system.mapper.SysUserMapper' mapperInterface. Bean already defined with the same name!

    前几天整体看了一下SpringBoot的简介,觉得看不如自己动手做,于是动手做一个简单的用户管理.启动的时候遇到了Skipping MapperFactoryBean with name 'sysUs ...

  6. 微软推出精简版Windows10Lean系统意欲何为？

    提起Windows系统,自然无须多言都知道它的重要性.在经历了Windows Vista的失败. Windows 7的成功.Windows 8的平庸和Windows 10的复兴之后,微软算是积累下了大 ...

  7. CF-1066B-Heaters

    这题就是从1到n点进行遍历,对未加热的点找到最远的能加热到这个点的点,还是看代码讲吧 #include"bits/stdc++.h" using namespace std; co ...

  8. Mac-常用命令与快捷键

    阅读更多 1.1 brew 格式: brew install <software> brew uninstall <software> brew update <soft ...

  9. （七）spring+druid多数据源配置

    druid多数据源配置 一.druid简介 Druid首先是一个数据库连接池,但它不仅仅是一个数据库连接池,它还包含一个ProxyDriver,一系列内置的JDBC组件库,一个SQL Parser. ...

  10. log4j不输出日志错误分析

    1.rootLogger不输出 代码如下: 配置文件代码: log4j.rootLogger=info, R,userLog log4j.appender.R=org.apache.log4j.Rol ...