我想点击按钮弹出弹窗,尝试使用了Dialog对话框 但是好像冲突了
代码:
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="Loading"
fit
highlight-current-row
@row-click="rowClick"
>
<el-table-column label="部门" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.departmentName }}</span>
</template>
</el-table-column>
<el-table-column label="订单号" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.orderNo }}</span>
</template>
</el-table-column>
<el-table-column label="订单序号" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.orderSerialNumber }}</span>
</template>
</el-table-column>
<el-table-column label="客户名称" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.customerName }}</span>
</template>
</el-table-column>
<el-table-column label="色号" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.colorNumber }}</span>
</template>
</el-table-column>
<el-table-column label="色名" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.colorName }}</span>
</template>
</el-table-column>
<el-table-column label="品名" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.goodsName }}</span>
</template>
</el-table-column>
<el-table-column label="匹数" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.pieces }}</span>
</template>
</el-table-column>
<el-table-column label="数量" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.numb }}</span>
</template>
</el-table-column>
<el-table-column label="门幅" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.larghezza }}</span>
</template>
</el-table-column>
<el-table-column label="克重" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.weight }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link :underline="false" @click="rowClick(scope.row)">
<i class="el-icon-edit" />
</el-link>
<el-link
:underline="false"
@click="deleteInForm(scope.$index, scope.row)"
>
<i class="el-icon-delete" />
</el-link>
</template>
</el-table-column>
<el-table-column label="打印">
<template>
<el-button type="text" @click="dialogFormVisible = true">
<i class="el-icon-printer"></i>
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div>
</el-dialog>
别把 dialog 定义在 table 中呀。。。
你把 dialog 和 table 搞成同级。
然后显示的时候把row传递进去,dialog使用传递进来的row渲染。