element 表格元素 超链接
1、在循环体中的事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
var Main = {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
、、Edit fiddle - JSFiddle https://jsfiddle.net/jbjcubhL/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@1.3.7/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="日期" width="180">
<template scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag>{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
var Main = {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@1.3.7/lib/index.js"></script>
<div id="app">
<template>
<el-table :data="tableData" border style="width: 100%">
<el-table-column label="日期" width="180">
<template scope="scope">
<el-icon name="time"></el-icon>
<span style="margin-left: 10px"
@click="handleEdit(scope.$index, scope.row)">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag>{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
var Main = {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
或
<!--<span style="margin-left: 10px" @click="handleEdit(scope.$index, scope.row)" >{{ scope.row.date }}</span>-->
<a :href="'http://'+scope.row.date"
target="_blank"
class="buttonText">{{ scope.row.date }}</a>
element 表格元素 超链接的更多相关文章
- html中表格元素的相关总结
表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...
- HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...
- 第六十三节，html表格元素
html表格元素 学习要点: 1.表格元素总汇 2.构建表格解析 本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一．表格元素总汇 ...
- html5权威指南：表格元素
第十一章:表格元素 ...
- html5之表格元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Element表格嵌入复选框以及单选框
1,element 表格嵌入CheckBox 效果图如下: 2,element结合checkBox实现单选效果如下: html代码: <template> <div> < ...
- element表格切入按钮以及复选框
1,element表格切入按钮 关键代码: html:<el-table :data="tableList" border style="width: 100%&q ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- html/css 表格元素以及表格布局
一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...
随机推荐
- 判断元素是否存时，使用isset会比in_array快得多
情境 有时候,我们需要判断一个元素是否存在于已有数据中(以此来获得非重复值),这时候,使用isset来判断会比in_array快得多很多!! 测试 1)准备测试数据 $exists_a = []; $ ...
- Four Ways to Create a Thread
Blaise Pascal Magazine Rerun #5: Four Ways to Create a Thread This article was originally written ...
- 文件名过滤器FilenameFilter的用法
Java.io.FilenameFilter是文件名过滤器,用来过滤不符合规格的文件名,并返回合格的文件: 实例1,匹配指定字符结尾的文件 package cn.test; import java.i ...
- jinja2主要语法
jinja2主要语法 1.变量 {{name}} 2.控制语句 {% if %} {{name}} {% else %} {{name2}} {% endif%} 3.宏 {% macro check ...
- 嵌入式ROOTFS transplantation
作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一个嵌入式设备如果内核能够运行起来,且不需要运行用户进程的话,是不需要文件系统的,文件系统简单的说就是一种目 ...
- Lua 正确的尾调用（proper tail call）
Lua支持“尾调用消除(tail-call elimination)”.尾调用(tail call):当一个函数调用是另一个函数的最后一个动作时,该调用才算是一条“尾调用”.例如,下面的代码就是一条“ ...
- iOS - UITextView在调用textViewDidChange方法，九宫格相关中文输入的问题
问题一 iOS textView在调用 UITextViewDelegate 的 textViewDidChange方法,九宫格相关中文输入的问题 有时候,需要在textViewDidChange处理 ...
- android linphone中opengl显示的实现
1,java层 在界面中创建GL2JNIView(基类为GLSurfaceView). 创建对象AndroidVideoWindowImpl,将GL2JNIView作为参数传入构造函数.在该对象中监听 ...
- Qt封装百度人脸识别+图像识别
AI技术的发展在最近几年如火如荼,工资待遇也是水涨船高,应用的前景也是非常广阔,去年火起来的人脸识别,今年全国遍地开花,之前封装了下face++的人脸识别等接口,今年看了下百度的AI,还免费了,效果也 ...
- css布局 - 九宫格布局的方法汇总（更新中...）
目录: margin负值实现 祖父和亲爹的里应外合 换个思路 - li生了儿子帮大忙. 借助absolute方位值,实现自适应的网格布局 cloumn多栏布局 grid display: table: ...