Vue项目实战总结（五 插槽）

话不多说，直接开冲

<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