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

最新推荐文章于 2025-05-28 19:34:53 发布

刺杀曲奇兔

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量105

点赞数

分类专栏： Vue 文章标签： javascript vue.js html5

本文链接：https://blog.youkuaiyun.com/qq_53548177/article/details/119931644

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文档展示了一个使用Vue.js和Element UI组件库创建的表格示例，该表格包含一级和二级标题，以及内容展示。用户可以编辑表格中的条目，并通过点击操作列的按钮进行删除。`handleEdit`方法用于触发编辑操作，`deleteIntroduction`方法处理删除逻辑。每个单元格的数据通过`scope.row`访问，行索引由`scope.$index`提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接开冲

<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){
    	
    }
}