<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. 01-电子商城项目介绍及ssm框架搭建

    1.B2C电商项目功能及架构 1.1功能列表 1.2系统架构(soa架构) 2.后台管理系统工程搭建及测试 ypMall,ypMall-manager-web ypMall为父项目,管理子项目的jar ...

  2. PCA的原理简述

    PCA的实质就是要根据样本向量之间的相关性排序,去掉相关性低的信息,也就是冗余的特征信息. 我们都知道噪声信号与待测量的信号之间实际上是没有相关性的,所以我我们利用这个原理就可以将与待测量无关的噪声信 ...

  3. deeplearning.ai 神经网络和深度学习 week3 浅层神经网络

    1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...

  4. JarvisOJ level3_x64

    这一题是和前面x86的差不多,都是利用了同一个知识点,唯一的区别就是使用的堆栈地址不同,x86是直接使用堆栈来传递参数的,而x64不同 x64的函数调用时整数和指针参数按照从左到右的顺序依次保存在寄存 ...

  5. java中字符串相等判断

    字符串的判断有2种: 1.判断地址是否相等  用:== 2.判断值是否相等  用:equals方法 Object类作为所有类的超类,而Object类的equals方法是直接比较地址的,源码如下: pu ...

  6. java学习——反射机制

    /* * JAVA反射机制是在运行状态中,对于任意一个类 (class文件),都能够知道这个类的所有属性和方法: * 对于任意一个对象,都能够调用它的任意一个方法和属性: * 这种动态获取的信息以及动 ...

  7. awk使用和详解

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  8. 微信小游戏排行榜页滚动查看排行榜（canvas指定区域溢出滚动，懒渲染）

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

  9. setContext or setCharacterEncoding

    request.setCharacterEncoding()是设置从request中取得的值或从数据库中取出的值response.setContentType("text/html;char ...

  10. Java编程风格节选

    3.3 import语句 3.3.1 import不要使用通配符 即,不要出现类似这样的import语句:import java.util.*; 3.3.2 不要换行 import语句不换行,列限制( ...