vue 使用element的Dialog 对话框问题

Question

我想点击按钮弹出弹窗，尝试使用了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>

Answer 1

别把 dialog 定义在 table 中呀。。。

你把 dialog 和 table 搞成同级。

然后显示的时候把row传递进去，dialog使用传递进来的row渲染。