在做后端时，很多列表希望点击某一行 弹出一个抽屉界面，编辑此行的内容。
这里采用vue + elementui 实现：
<template>
<div>
<div class="table-responsive" v-loading="tableLoading">
<el-table
v-bind:data="tablelist"
border
ref="multipleTable"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column
type="selection"
width="38">
</el-table-column>
<el-table-column
prop="placeName"
label="广告位名称"
width="180">
<template slot-scope="scope">
<a><span> {{scope.row.placeName }}</span></a><br/>
<span style="color:#999">ID: {{scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column
prop="adtype"
label="平台类型" >
<template slot-scope="scope">
<span> {{scope.row.adtype|filter_adtype}}</span>
</template>
</el-table-column>
<el-table-column
prop="placeType"
label="类型" >
<template slot-scope="scope">
<span> {{scope.row.placeType|filter_placeType}}</span>
</template>
</el-table-column>
<el-table-column
prop="adtags"
label="标签" >
<template slot-scope="scope">
<el-tooltip class="item" effect="light" :content="scope.row.adtags" placement="top-start">
<span class="eslip1">{{scope.row.adtags}}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
prop="size"
label="尺寸" >
<template slot-scope="scope">
<span> {{scope.row.placeWidth}}{{scope.row.sizeDot}}{{scope.row.placeHeight}}</span>
</template>
</el-table-column>
<el-table-column
prop="modifytime"
label="更新时间" width="110" >
<template slot-scope="scope">
<span> {{scope.row.modifytime|filter_modifytime}} </span>
</template>
</el-table-column>
<el-table-column
prop="filt"
label="使用情况" width="150" >
<template slot-scope="scope">
<span style=" cursor: pointer;" @click="handleOpenAdverte(scope.$index, scope.row)">
<a>{{scope.row.filt}}</a> 个有效广告</span>
</template>
</el-table-column>
<el-table-column
prop="status"
label="状态" >
<template slot-scope="scope">
<span :class="'adstatus'+scope.row.disabled">
{{scope.row.disabled|filter_disabled}}
</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
size="mini" type="text"
@click="handleGetCode(scope.$index, scope.row)">获取代码</el-button>
<el-button
size="mini" type="text"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini" type="text"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
<el-button
size="mini" type="text"
@click="handleEdit(scope.$index, scope.row)">更多</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 这里是新增广告位 -->
<el-drawer
ref="adverteDrawer"
title="广告列表"
:append-to-body="true"
:visible.sync="adverteDrawerVisible"
:show-close="true"
:before-close="handleDrawerClose"
:wrapper-closable='false'
:destroy-on-close="true"
:with-header="true"
size="85%">
<div class="formBox" >
<table-adverte-list
:idplace="idplace"
v-on:onclosedrawer="onCloseDrawer"
></table-adverte-list>
</div>
</el-drawer>
</div>
</template>
<script>
import TableAdverteList from "./TableAdverteList.vue";
import Options from './Options.js';
export default {
// 加入查看 有效广告的列表组件
components: { "table-adverte-list": TableAdverteList},
props:{
"tablelist":{
type: Array, default:[],
},
"tableLoading":{ type: Boolean, default: false },
},
data(){
return {
idplace: 0,
multipleSelection:[] ,//被选中的行
adverteDrawerVisible : false, //显示某一个行的广告 列表抽屉；
}
},
created(){
// this.getListInfo();
},
filters:{
filter_adtype(value){
return Options.filter_adtype(value);
},
filter_placeType(value){
return Options.filter_placeType(value);
},
filter_disabled( value){
var label = {"0":"--","1":"删除","2":"启用", "3":"停用"};
return label[value];
},
filter_modifytime(value){
return value.split(" ")[0];
}
},
methods:{
clearSelection(){
this.$refs['multipleTable'].clearSelection();
},
//全新勾选
handleSelectionChange(row) {
this.multipleSelection = row;
this.$emit("handle-selection-change", row)
},
handleDelete(index, row ){
this.$emit("onhandle-delete", index, row);
},
// 编辑 按钮 点击事件
handleEdit(index, row ) {
this.$emit("onhandle-edit", index, row);
},
//获取代码
handleGetCode(index, row){
this.$emit("onhandle-getcode", index, row);
},
handleOpenAdverte(index, row){
// console.log(row)
if(row.filt==0){
this.$message({message:"暂无广告投放", type:"error"})
return;
}
this.adverteDrawerVisible = true;
this.idplace = row.id;
},
//显示广告 的抽屉
handleDrawerClose(){
},
// 表单组件提交表单 后成功，关闭抽屉
onCloseDrawer(e) {
this.$refs.adverteDrawer.closeDrawer();
},
// 点击抽屉右上角 关闭按钮，关闭新建广告位的drawer
handleDrawerClose(done) {
done();
},
}
}
</script>
好了本文全部内容结束结束，感谢你的阅读。
