vue中slot-scop=“scope“

<template><el-table :data="tableData" style="width: 100%">//---:data="用于存放请求数据回来的数组"<el-table-column label="索引值" width="400"><template slot-scope="scope">//--- 这里取到当前单元格<span>{{ scope.$index }}</span>//--- scope.$index就是索引</template></el-table-column><el-table-column label="标题" width="350"><template slot-scope="scope">//--- 这里取到当前单元格<span>{{ scope.row.title }}</span>//--- scope.row 直接取到该单元格对象，就是数组里的元素对象，即是tableData[scope.$index]//---.title 是对象里面的title属性的值</template></el-table-column><el-table-column label="操作"><template slot-scope="scope">//--- 这里取到当前单元格<el-dropdown size="medium" split-button type="primary">更多<el-dropdown-menu slot="dropdown"><el-dropdown-item @click.native.prevent="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item><el-dropdown-item @click.native.prevent="getUp(scope.$index, scope.row)">上升</el-dropdown-item><el-dropdown-item @click.native.prevent="getDown(scope.$index, scope.row)">下降</el-dropdown-item><el-dropdown-item @click.native.prevent="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>//---这里的点击事件已经不是在根元素上了，因为多套了几层结构。//---这里的点击事件如果没有加上 .native 则点击无效！//---这里的点击事件要加上 .native 表示监听组件根元素的原生事件。//---这里的点击事件不需要 .prevent 也可以实现相同效果</el-dropdown-menu></el-dropdown></template></el-table-column></el-table>
</template><script>
export default {data () {return {tableData: [{ title: 123, age: 11 }, { title: 456, age: 18 }]// ---为了效果先给值，一般情况下为空，其实际值是后台接口请求回来的}},methods: {handleDelete (index, row) {this.tableData.splice(index + 1, 1)// ---前端删除index要+1 !!!!!!!// ---下面是后端数据删除，可以不看axios.post(config.newsDelete, // ---后端数据删除{id: row.id// ---传入被删除的对象的id值},{headers: {Authorization: 'Bearer ' + sessionStorage.getItem('token')// ---请求头验证}}).then((res) => {this.rendering()// ---删除了重新渲染})}}
}
</script><style></style>

vue中slot-scop=“scope“相关推荐

理解vue中的slot-scope=“scope“
理解vue中的slot-scope="scope" slot是插槽,slot-scope="scope"相当于一行的数据 <el-table-column ...
Vue 中 slot插槽的使用
Vue 中 slot插槽的使用插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
vue中 slot 的使用总结
vue中slot的使用总结 slot是Vue中的插槽,首先它是使用在子组件中的 Vue的slot插槽,简单理解就是,在子组件内占坑,在父组件里填坑. slot一般都是子组件定义了主体部分,父组件引 ...
「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用，实用且也是组件中必会的一个知识，另外也可以实现父子组件之间通信
前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些.更多时候也会更加方便. 今天介绍Vue中三种插槽吧:默认插槽.具名插槽.作用 ...
Vue中slot与slot-scope的理解及使用
以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot. 但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资 ...
Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
vue中slot,slot-scope,v-slot的用法和区别
以下仅为个人理解,若有不妥请留言评论区 v-slot 指令自 Vue 2.6.0 起被引入,在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持,但已经被 ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
vue 中slot 的具体用法
子组件 <template><div class="slotcontent"><ul><!--<slot></slot& ...
vue中slot插口的用法
关于slot插口的作用:可以借助input中的placeholder占位属性来理解. 若子组件中插入DOM元素时,则slot不显示,如果没有插入一些DOM的时候,则slot显示.简单的实例如下: &l ...

vue中slot-scop=“scope“

vue中slot-scop=“scope“相关推荐

最新文章

热门文章