scope:
<template>
<section>
<slot-child>
<template slot-scope="scope">
<div>{{scope.nickName}}</div>
</template>
</slot-child>
</section>
</template>
作用域插槽 :个人理解 在某个组件内部,再次使用某个组件
实战案例为:
<!-- 用户列表区 -->
<el-table :data="UserList" style="width: 100%" border stripe>
<el-table-column type="index"> </el-table-column>
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="email" label="邮箱"> </el-table-column>
<el-table-column prop="mobile" label="电话"> </el-table-column>
<el-table-column prop="role_name" label="角色"> </el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch
v-model="scope.row.mg_state"
@change="userStateChange(scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改按钮 -->
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
></el-button>
<!-- 删除按钮 -->
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="delUser(scope)"
></el-button>
<!-- 分配角色按钮 -->
<el-tooltip
effect="dark"
content="分配角色"
placement="top"
:enterable="false"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
el-table是一个组件, 我们在组件内部使用了一个模板
<template slot-scope="scope">
<!-- 修改按钮 -->
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
></el-button>
<!-- 删除按钮 -->
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
@click="delUser(scope)"
></el-button>
<!-- 分配角色按钮 -->
<el-tooltip
effect="dark"
content="分配角色"
placement="top"
:enterable="false"
>
<el-button
type="warning"
icon="el-icon-setting"
size="mini"
></el-button>
</el-tooltip>
</template>
将其插入在组件中
其中我们重点要理解scope
所以当我们访问scope.row就是访问该行数据
<br/>
自行完成删除用户代码
async delUser(row) {
const { data: res } = await this.$http.delete(`users/${row.id}`)
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state
return this.$message.error('用户删除失败')
}
this.$message.success('用户删除成功!')
this.getUserList()
input 输入框 绑定 keydown.enter事件无法触发
加上.native覆盖原有封装的keyup,keydown事件即可
@keyup.enter.native="changeUser" 这样即可触发
<br/>
码云和本地实战的话 每次一个新功能先提交到一个新的分支, 然后将新分支提交到云端
然后再该分支完成开发后 上传到云端
然后切换回主分支,然后合并分支 然后再上传到云端
如果没完成 记得切换回来
git branch //查看当前分支
git checkout -b rights //创建新分支 并切换
git push -u origin rights //将本地分支推送到云端 新分支要加-u origin
git checkout master //是切换回主分支
git merge user //将user分支合并到主分支
git push //如果分支有 直接push就可以
最后一次更新于2021-01-20
0 条评论