0f04615685
Former-commit-id: 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 7b74bdf25b14c6a8da08ae07075e3f78be308894 [formerly 1e795e1614aaf94f23ad99354f6ca9be303a1b1e [formerly 9ce21aef6b043d8bfcb2849dd7c6bc34e4625387]]]]] Former-commit-id: c92d7410adc4138c7903c0067860fc3d190f54b0 Former-commit-id: 9f0ab819a505e341a6edf210efb107df8b8efe33 Former-commit-id: 3006c0d2ccda4133203372c30ffee34a73fa8944 [formerly f340ca4127e4578b3c53747d13bbaba223ed4e83] Former-commit-id: 9624c2aaa99880b5e37f1e60f1f36ac673e021ed Former-commit-id: 7923489f2c3c637782d9d4a1707bc48dfe3b1acf Former-commit-id: 2375e080a7f715bc48da40d4c56235efad3f0d5d Former-commit-id: c41402e6c0266a07e974efad41feed7c6fb7d0b6 Former-commit-id: b8814b31619151361c91ed37cb1ee7f3813853c1
75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<template>
|
|
<el-table
|
|
:data="tableData"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
label="日期"
|
|
width="180">
|
|
<template slot-scope="scope">
|
|
<i class="el-icon-time"></i>
|
|
<span style="margin-left: 10px">{{ scope.row.date }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="姓名"
|
|
width="180">
|
|
<template slot-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 size="medium">{{ scope.row.name }}</el-tag>
|
|
</div>
|
|
</el-popover>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="danger"
|
|
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
title: '自定义列模板',
|
|
index: 14,
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
</script>
|