vue 使用element的Dialog 对话框问题

我想点击按钮弹出弹窗,尝试使用了Dialog对话框 但是好像冲突了
image.png
代码:

 <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>
阅读 3.7k
1 个回答

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

你把 dialog 和 table 搞成同级

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题