写Vue项目的一些总结(一)
1.查看弹出框中使用了抽屉加卡片来展示数据,一行只展示一种状态<el-drawer:visible.sync="drawer":with-header="false":before-close="handleClose"><el-card shadow="never"><b>客户编码:</
·
1.查看弹出框中使用了抽屉加卡片来展示数据,一行只展示一种状态
<el-drawer
:visible.sync="drawer"
:with-header="false"
:before-close="handleClose">
<el-card shadow="never">
<b>客户编码:</b>
<span style="width: 80%">{{selectionDate.client_id}}</span>
</el-card>
<el-card shadow="never">
<b>客户姓名:</b>
<span style="width: 80%">{{selectionDate.client_name}}</span>
<!--</el-form-item>-->
</el-card>
</el-drawer>
2.表格中使用操作,添加增删改查按钮,
添加slot插槽和template标签;
scope.row为表格绑定的一行数据 :disabled 未分配可操作已分配则禁用
<el-table-column label="操作" align="center"
width="200px">
<template slot-scope="scope">
<el-tooltip class="item" effect="light" content="查看" placement="top">
<el-button
circle
size="mini"
icon="el-icon-zoom-in"
type="primary"
@click="setModelDate(scope.row)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="light" content="分配" placement="top" v-if="nowRole_id==1 || nowRole_id==2 || nowRole_id == 3">
<el-button
circle
size="mini"
icon="el-icon-s-custom"
type="info"
@click="assignDate(scope.row)" :disabled="scope.row.client_assigned=='已分配'?true:false"></el-button>
</el-tooltip>
</template>
</el-table-column>
更多推荐
已为社区贡献1条内容
所有评论(0)