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>

Logo

前往低代码交流专区

更多推荐