5c64754622
Former-commit-id: 55509c807e43c9c9173906d9f6859ce7cd16a4dd [formerly 55509c807e43c9c9173906d9f6859ce7cd16a4dd [formerly 55509c807e43c9c9173906d9f6859ce7cd16a4dd [formerly 55509c807e43c9c9173906d9f6859ce7cd16a4dd [formerly bf3ccb939de81df011acbfd7416748259cd1583c [formerly ae7370ed3f65db3257495a8bd5f052eb9e095513]]]]] Former-commit-id: 2a9bf374333363740328b54efb2425954f4d3235 Former-commit-id: f81df7d26b3ffcaf6a2c70af0c824ec5b884b811 Former-commit-id: f4f8ff4cb317a23e2c08b638dc9aca59f20429e8 [formerly cbbda628e9b1bed507046f926f4a6ce78492bd60] Former-commit-id: 4b68663d61558131642ea27489ee12b3da3b6ded Former-commit-id: 562364039d7156c5d96d61b85ec42bf25fef7db7 Former-commit-id: b9d640cba58769028f78b591095855b8cf6bb767 Former-commit-id: 72ede8b88b42b913d1d8453fdb546954561056f5 Former-commit-id: 6c87b7b7aa205f9adb6fd5825624b7195c6954aa
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>
|