iView的表单table
// html
<div class="exam-list">
<Table :columns="columns7" :data="data6" border height="500"></Table>
</div>
<script>
export default {
data () {
return {
columns7: [
{
title: 'Name',
key: 'name',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.name)
]);
}
},
{
title: 'Age', // 一个表头代码块
key: 'age'
},
{
title: 'Address', // 一个表头代码块
sortable:true, // 是否排序
key: 'address'
},
{
title: 'Action',
key: 'action',
width: 150, // 单独设置宽
align: 'center', // 居中设置
render: (h, params) => {
return h('div', [
h('Button', {
props: { // 按钮设置
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index) // 调用函数
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index) // 删除
}
}
}, 'Delete') // button 内容文本
]);
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park'
}
]
}
},
methods: {
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name:${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address:${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
},
created(){
this.data6 = data ; // 请求的数据
}
</script>
iView的表单table的更多相关文章
- js 动态添加表单 table tr
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iview form表单数值类型校验「iview自定义form表单校验器」
摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...
- iview form 表单的怪异小BUG
当同一个弹窗中的表单重复利用时: 我原先的代码逻辑是: <Form :label-width="100" class="mt20" ref="c ...
- iview动态校验表单,获取值为undefined
场景:实际代码如下:https://run.iviewui.com/XPofr3YS 原因:在动态校验名称时,没法获取值,请教了大神后,发现原来是自己demo没理清楚 这里的prop="na ...
- iview表单验证下拉框不通过问题
iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...
- iview 表单相关
view表单验证的步骤: 第一步:给 Form 设置属性 rules :rules第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“第三步:注意:Fo ...
- 1、前端--HTML简介、head内常见标签、body内常见标签(特殊符号、div、span、a、img、列表、表格table、表单form)、标签两大属性
今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...
- 浏览器下载/导出文件 及jQuery表单提交
1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...
- 基于jQuery表单快速录入数据功能
一.功能介绍:完全依靠jQuery,表单table新增行(按键盘tab增一行,按esc删一行),也可以加一个新增行按钮点击新增多行,这里就不多说了~~ 二.该功能主要实现技术: 1,总体.NET MV ...
随机推荐
- BCrypt密码加密
快速入门 (1)我们从官网下载源码 BCrypt 官网 http://www.mindrot.org/projects/jBCrypt/ (2)新建工程,将源码类BCrypt拷贝到工程 (3)新建测试 ...
- IT面试技巧(1)
声明:以下面试技巧仅作参考,更多的时候还是要真实得表达自我,要保持一定的职业素养. 1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有 ...
- 【学习总结】Python-3-逻辑运算符
参考:菜鸟教程-Python3运算符 逻辑运算符的计算规则划重点: 并不是只返回布尔型,有时会返回变量的数值 (优先级:not>and>or) 总结: '与或非'三件套中,not与数学逻辑 ...
- js 对象 window,parent,top,opener,document
Js 对象 window top parentWindow 当前html 页面Parent 当前html 页面的父页面Top 当前html页面的祖页面Window ==parent = top 当前页 ...
- 第八组Postmortem事后分析
第八组Postmortem事后分析 一.团队成员总结的改进和教训 隆晋威:Beta阶段完善架构设计,分工更加明确,文档更丰富,交流带来开销减少.Alpha技术选型不固定,分工混乱,没有方便的测试引擎, ...
- SecureCRT安装,服务器远程连接客户端SSH
SSH: Secure Shell 的缩写,是用来连接Linux服务器系统的软件. 它可以同时创建多个连接,方便对服务器的操作使用,界面也比Linux系统好看的多,同时安装一些必备的软件能更加方便 ...
- 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details
今天构建vue项目执行npm install初始化后报错 run `npm audit fix` to fix them, or `npm audit` for details 出现这问题控制台会有一 ...
- Educational Codeforces Round 65 E,F
E. Range Deleting 题意:给出一个序列,定义一个操作f(x,y)为删除序列中所有在[x,y]区间内的数.问能使剩下的数单调不减的操作f(x,y)的方案数是多少. 解法:不会做,思维跟不 ...
- HBase性能优化方法总结(三):读表操作(转)
转自:http://www.cnblogs.com/panfeng412/archive/2012/03/08/hbase-performance-tuning-section3.html 本文主要是 ...
- webpack第一节(3)
模块化加载 上一节进行了一个简单的模块化加载,复杂点 新建一个js文件 名为 world.js 依旧在根目录下 在hello.js中引入world.js 模块化加载,world.js是一个模块 引入的 ...