话不多说,直接开冲
<el-table :data="data" style="width: 100%">
<el-table-column align="center" label="一级标题" width="190" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-bind:title1="scope.row.title1">{
{
scope.row.title1 }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="二级标题" width="190">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{
{
scope.row.title2 }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="内容" align="center" width="550">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{
{
scope.row.content }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<template slot-scope="scope">
<el-button
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.$index, scope.row)
>编辑</el-button>
<el-button
type="text"
icon="el-icon-delete"
class="red"
@click="deleteIntroduction({id:scope.row.id})"
>删除</el-button>
</template>
</el-table-column>
</el-table>
export default {
data () {
return {
idx: -1,
data:[{
},{
},{
}],
}
},
methods: {
handleEdit(index, row){
this.idx = index;
console.log("index", index, "row:", row)
this.form = {
title1: row.title1,
title2: row.title2,
content: row.content,
id: row.id,
father_id: row.father_id
};
},
deleteIntroduction(query){
}
}
:data 绑定数组
scope.row代表获取当前行对象
@click="handleEdit(scope.$index, scope.row)
这里拿到每一行的index----------scope.$index
这里拿到每一行的数据-----------scope.$row