vue问题1

bettercat

已于 2024-04-24 15:00:01 修改

阅读量140

点赞数

分类专栏： vue 文章标签： vue.js 前端 typescript

于 2022-06-23 15:29:48 首次发布

本文链接：https://blog.csdn.net/sd6022/article/details/124467276

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、监听prop

父组件
在子组件risksource中传值guid
在这里插入图片描述
子组件
在prop中接收guid，使用watch监听
使用参数immediate 立即监听

2、集合多个组件一同抛出，并切换动态组件

<template>
  <div>
    <div class="rightShowHide" @click="rightShowHide">
      <img src="@/assets/rightPanel/right.png" alt="" v-if="rightShow" />
      <img src="@/assets/rightPanel/left.png" alt="" v-if="!rightShow" />
    </div>
    
    <div  style="width: 100%; height: 100%">
      <transition name="breadcrumb" mode="out-in">
        <component  :is="curentCom"></component> //动态组件 is决定使用哪个组件
      </transition>
    </div>
  </div>
</template>

<script>
var res_components = {};
//动态加载所有配置项的面板页面组件，以.vue结尾的组件
const allComponents = require.context(
  "@/components/rightPanel/panel",
  false,
  /\.vue$/
); //收集所有以.vue结尾的文件（组件）

allComponents.keys().forEach((fileName) => {
  let comp = allComponents(fileName);
  res_components[fileName.replace(/^\.\/(.*)\.\w+$/, "$1")] = comp.default;
});//数据格式变为以文件名为key，文件中方法为value的对象

import eventBus from "@/components/utils/eventBus.js";
export default {
  name: "rightPanel",
  components: {...res_components},
  props: ["curentCom"],
  data() {
    return {
      rightShow: true,
      // curentCom: "waterSourceMonitoringPanel",
    };
  },

  computed: {},
  methods: {
    rightShowHide() {
      // this.rightShow = !this.rightShow;
      // eventBus.$emit("rightShowHide", this.rightShow);
    },
  },
  mounted() {

  },
};
</script>

3、获取el-select中label值

      <el-select
        v-model="selectTimeValue"
        ref="selectTime"
        placeholder="请选择"
        class="selectContent"
        size="mini"
        @change="search"
      >
        <el-option
          v-for="item in selectTime"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

 dateStage:this.$refs.selectTime.selectedLabel, //可以获取选择器中的label值

3、table-修改表头颜色

全局

/* 全局修改el-table 表头和内容颜色 header color content color */
.el-table th {
  background: #F6F9FC !important;
  .cell{
    font-weight: 400;
    color: #82909F !important;
  }
}

单文件

 <el-table :data="tableData" header-cell-style="background-color: #F6F9FC; color: #82909F">
        <el-table-column  label="1" fixed />
        <el-table-column  label="2序列号"/>
        <el-table-column  label="3名称" />
        <el-table-column  label="4" fixed="right" />
 </el-table>