vue+elementUI 分页多选弹窗回显,编辑回显

最新推荐文章于 2024-07-14 21:18:34 发布

偶阵雨丿

最新推荐文章于 2024-07-14 21:18:34 发布

阅读量1.8k

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/gzy_0922/article/details/101550379

版权

本文介绍了如何在Vue项目中结合ElementUI实现分页选择功能，并在弹窗中实现已选项的回显。通过创建一个可关闭的tag标签展示已选内容，详细阐述了分页多选组件的编写过程。

摘要由CSDN通过智能技术生成

实现分页多选弹窗回显功能

父级页面以可关闭tag标签形式展示已选

1.编写分页多选弹窗组件

<template>
  <el-dialog
    title="关联问题"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    :visible.sync="visible"
    width="40%"
    :modal="true"
    top="20px"
    style="height:100%;overflow: hidden"
  >
    <div style=" width:auto;height:700px;overflow: auto">
     
      <el-table
        v-loading="loading"
        element-loading-text="加载数据中"
        ref="multipleTable"
        :data="questionArray"
        :row-key="getRowKeys"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column label="">
          <template slot-scope="scope">
              <p style="font-size: 14px;">{
  {scope.row.content}}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 16px; text-align:right;"
        layout="total, prev, pager, next, jumper"
        :page-size="10"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--        </el-row>-->

    </div>
    <div style="margin-top: 20px">
      <el-button type="primary" @click="selectedQuestions">确 定</el-button>
      <el-button @click="quitSelect">取消已选</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {httpUrl} from "../router/http_url";

    export default {
        name: "AssQustionPage.vue",
        props: {
            visible: {
                type: Boolean,
                default: false