vue+elementUI弹窗 引用父页面里的参数

vue+elementUI 弹窗 引用父页面里的参数

img

点击修改密码
弹窗

img


怎么才能把账号 拿过来

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7751243
  • 这篇博客也不错, 你可以看下【vue+elementui】 新增编辑共同弹窗+解决数据回显报错
  • 除此之外, 这篇博客: vue+elementUI配置表格的列显示与隐藏中的 vue+elementUI配置表格的列显示与隐藏 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 描述：
    表格的列过多时，可以根据需要控制列的显示与隐藏，目前是采用Vue+elementUI（适配Vue3的Element Plus）实现的，具体效果与代码如下：
    效果图：
    在这里插入图片描述

    完整代码：

    <template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        type="index"
        align="center"
        :index="1">
        <template #header>
          <el-popover
            placement="bottom"
            :width="600"
            :visible="visible"
          >
            <!-- 配置列面板 -->
            <transition name="fade">
              <div>
                <div>选择显示字段</div>
                <div>
                  <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
                  <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
                  <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
                  <el-checkbox v-model="showColumn.city">市区</el-checkbox>
                  <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
                  <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
                </div>
              </div>
            </transition>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="saveColumn">确定</el-button>
            </div>
            <template #reference>
              <i
                class="el-icon-setting"
                style="font-size: 22px; cursor: pointer"
                @click="visible = true"
              ></i>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        minWidth="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      // 列的配置化对象，存储配置信息
      showColumn: {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      },
    };
  },
  mounted() {
    // 发请求得到showColumnInitData的列的名字
    if(localStorage.getItem("columnSet")){
      this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
    }else{
      this.showColumn = {
        date: true,
        name: true,
        provinces: true,
        city: true,
        adreess: true,
        zipCode: true,
      };
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    saveColumn() {
      localStorage.setItem("columnSet",JSON.stringify(this.showColumn))
      this.visible = false;
    },
  },
};
</script>

<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

    问题：
    1、可以简单实现，但最好的方法是列的全部字段也通过配置实现；
    2、elementUI的popover嵌套在table里使用时，会出现面板的显示bug，例如本文是采用:visible=“visible”，如果按照正常双向绑定v-model:visible=“visible”，则会出现弹窗闪现的现象，弹出后会立马关闭；
    现象：
    在这里插入图片描述

    原因猜想：
    v-model:visible=“visible”，会自动触发遮罩层关闭，置visible变为false（watch监听visible，点击弹出按钮时，visible变为true后会立马变为false）；
    3、如果某一列设置minWidth属性，如果隐藏该列，则popover会出现弹出两个窗口的异常现象，例如“地址”列：
    在这里插入图片描述

    故可采用dialog来实现：

    <template>
  <div id="app">
    <el-table :data="tableData" border style="width: 100%" ref="table">
      <el-table-column
        fixed
        type="index"
        align="center"
        :index="1">
        <template #header>
          <i
            class="el-icon-setting"
            style="font-size: 22px; cursor: pointer"
            @click="visible = true"
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150"
        v-if="showColumn.date"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        v-if="showColumn.name"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        label="省份"
        width="120"
        v-if="showColumn.provinces"
      >
      </el-table-column>
      <el-table-column
        prop="city"
        label="市区"
        width="120"
        v-if="showColumn.city"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        minWidth="300"
        v-if="showColumn.adreess"
      >
      </el-table-column>
      <el-table-column
        prop="zip"
        label="邮编"
        width="120"
        v-if="showColumn.zipCode"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="字段配置" v-model="visible">
      <transition name="fade">
        <div>
          <div>选择显示字段</div>
          <div>
            <el-checkbox v-model="showColumn.date" disabled>日期</el-checkbox>
            <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
            <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
            <el-checkbox v-model="showColumn.city">市区</el-checkbox>
            <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
            <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
          </div>
        </div>
      </transition>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="saveColumn">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

    效果：
    在这里插入图片描述

  • 您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui在网页中的使用小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    我会尝试回答这个问题。

    首先，在父组件中通过props传递参数给子组件，在子组件中可以通过props获取父组件传递的参数。所以，在弹窗组件中应该也是同样的使用props获取父组件传递的参数。

    假设父组件中传递的参数名为“account”，在子组件中应该这样使用props获取该参数：

    props: {
  account: {
    type: String,
    required: true
  }
},

    接下来，就可以在弹窗组件中使用该props传递的参数了。比如，在修改密码的弹窗中，可以在输入框中绑定这个参数，让用户知道其账号名称。例如：

    <el-input
  v-model="password"
  placeholder="请输入新密码"
  size="medium"
  :prefix-icon="'el-icon-lock'"
  :suffix-icon="{ color: passwordStrengthColor, icon: passwordStrengthIcon }"
  :show-password="showPassword"
  :account="account"
></el-input>

    在上述代码中，使用了props绑定了父页面传递的参数“account”，并在输入框渲染时使用了这个参数作为输入框前缀的一部分。

    当然，需要在父组件中调用子组件时传递这个参数，例如：

    <password-change-dialog
  :visible.sync="dialogVisible"
  :account="account"
></password-change-dialog>

    在上述代码中，通过props将父页面传递的参数“account”传递给了子组件“password-change-dialog”。

    总结来说，获取父页面传递的参数可以使用props，在对应的子组件中绑定该参数，然后就可以在弹窗组件中使用该参数了。

父子组件传值啊，大哥， 基础中的基础。给个采纳吧

在JS里找到修改密码这个方法，把表格里的数据获取到



```javascript
父组件 <tableExcels ref="tableExcels" :message="这里是需要传的参数，可自定义" />
//子组件props接收参数message
props: {
    message: {
        type: String,                 //可指定接收类型，如:Array.
        default:"this is default"     //可设置默认值
    }
}

```