在Vue.js中，使用Element UI的el-select组件时，如果你想在选项变化时获取选中项的label值，你可以监听change事件，并通过事件对象的target属性访问到选中项的值。

以下是一个简单的例子：

<template>
  <el-select v-model="selectedValue" @change="handleChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        // ...更多选项
      ]
    };
  },
  methods: {
    handleChange(value) {
      // 通过value找到对应的label
      const selectedLabel = this.options.find(option => option.value === value).label;
      console.log('Selected Label:', selectedLabel);
      // 如果需要，可以进一步处理selectedLabel
    }
  }
};
</script>

在这个例子中，每当用户选择一个不同的选项时，handleChange方法会被调用，并且会打印出选中项的label值。这是通过在data中维护一个options数组来实现的，其中包含了每个选项的label和value。在handleChange方法中，我们使用find函数来找到与选中的value对应的那个option对象，并获取它的label属性。

Element UI 是一个 Vue 组件库，其中的组件样式是通过 CSS 定义的。如果你想设置 Element UI 组件的行高，你可以通过 CSS 来实现。

以下是一个简单的例子，演示如何设置 Element UI 的按钮（el-button）组件的行高：

1. 在你的 Vue 组件的 <style> 标签中，为 el-button 添加一个类，并设置行高：

<style scoped>
.my-button {
  line-height: 30px; /* 设置你想要的行高 */
}
</style>

2. 在模板中，将这个类应用到你的 Element UI 按钮上：

<template>
  <el-button class="my-button">按钮</el-button>
</template>

请注意，如果你想要全局设置 Element UI 组件的默认行高，你可能需要在全局 CSS 文件中设置相应的类选择器，并确保它有足够的特异性来覆盖库中原有的样式。

如果你想要覆盖库中所有组件的默认行高，你可以在全局样式文件中直接设置 .el-button 的样式：

/* 全局 CSS 文件 */
.el-button {
  line-height: 30px; /* 设置你想要的行高 */
}

请记住，直接修改库提供的默认样式可能会导致未来更新时的兼容性问题，因此最好是在你自己的样式文件中进行覆盖。

<template>
  <div id="diagram-container"></div>
</template>
 
<script>
import { Gojs } from "gojs";
 
export default {
  name: "DiagramComponent",
  data() {
    return {
      myDiagram: null,
      // 定义节点和连线的模型数据
      nodeDataArray: [
        { key: "Start" },
        { key: "End" },
        // 更多节点...
      ],
      linkDataArray: [
        { from: "Start", to: "End" },
        // 更多连线...
      ]
    };
  },
  mounted() {
    this.initDiagram();
  },
  methods: {
    initDiagram() {
      const $ = Gojs;
      const myDiagram =
        $(this.$el).find("#diagram-container").gojs({
          // 定义模板节点和连线
          nodeTemplate: $(
            $(Gojs.TextBlock, {
              font: "10pt 'Segoe UI', Verdana, Helvetica, Arial, sans-serif",
              stroke: '#333333',
              margin: 4,
              maxSize: new Gojs.Size(150, NaN),
              wrap: Gojs.TextWrap.Word,
              text: $(Gojs.Binding, 'key')
            })
          ),
          link: $(Gojs.Link,
            { routing: Gojs.Go.Link.Orthogonal, corner: 5 },
            $(Gojs.Shape, { strokeWidth: 1.5, stroke: '#30adf5' }), // the link shape
            $(Gojs.Arrow, 'OpenTriangle', { width: 10, height: 10, fill: '#30adf5' })
          ),
          model: new Gojs.GraphLinksModel(this.nodeDataArray, this.linkDataArray),
          // 更多配置...
        });
 
      this.myDiagram = myDiagram;
    }
  }
};
</script>
 
<style>
/* 样式调整 */
#diagram-container {
  width: 100%;
  height: 800px;
  background-color: #dae4e4;
}
</style>

这个简化版的代码实例展示了如何在Vue组件中初始化GoJS流程图编辑器，并设置基本的模板和样式。在实际项目中，你需要根据具体需求进一步配置GoJS的各项参数，例如事件处理、自定义行为等。

在使用ElementUI的Table组件绘制二维表格时，你需要定义表格的数据源和列信息。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '李小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        // ... 更多数据
      ]
    };
  }
};
</script>

在这个例子中，el-table 是表格的容器，el-table-column 用来定义每一列的数据和显示的标签。data 属性绑定到 tableData，它是一个包含对象的数组，每个对象代表一行数据，对象的属性（如 date、name 和 address）与 el-table-column 的 prop 属性对应，以此来展示数据。

在Vue 3和Element Plus中，如果你想要自定义日历的工作日样式，你可以使用dayclass属性来实现。dayclass是一个函数，它接收一个参数date，这是当前遍历的日期对象，并返回一个表示该日期类名的字符串。

以下是一个简单的例子，展示了如何使用dayclass来为工作日添加特定的样式：

<template>
  <el-calendar :dayclass="dayClass"></el-calendar>
</template>
 
<script setup>
import { ref } from 'vue';
 
const dayClass = (date) => {
  // 假设周六周日为非工作日，添加custom-rest-day类
  if (date.day === 6 || date.day === 0) {
    return 'custom-rest-day';
  } else {
    return '';
  }
};
</script>
 
<style>
.custom-rest-day {
  background-color: #e9e9e9; /* 灰色背景表示非工作日 */
  color: #333; /* 非工作日的文字颜色 */
}
</style>

在这个例子中，dayClass函数检查当前遍历的日期是否是周六或周日（date.day的值为6表示周六，值为0表示周日）。如果是非工作日，则返回一个表示自定义样式类名的字符串custom-rest-day，否则返回空字符串。在<style>标签中定义了.custom-rest-day类，它设置了非工作日的特定样式。

在Vue.js中使用Element UI的el-upload组件实现递归多文件上传，可以通过设置el-upload的multiple属性来允许选择多个文件，并且可以通过监听on-success事件来实现递归上传。以下是一个简单的示例：

<template>
  <el-upload
    class="upload-demo"
    drag
    :multiple="true"
    :on-success="handleSuccess"
    :before-upload="handleBeforeUpload"
    action="https://jsonplaceholder.typicode.com/posts/"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      fileList: [], // 存储待上传的文件列表
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 移除已上传的文件
      this.fileList = this.fileList.filter(item => item !== file);
 
      // 继续上传剩余文件
      if (this.fileList.length > 0) {
        this.uploadFiles(this.fileList);
      }
    },
    handleBeforeUpload(file) {
      // 添加待上传的文件到列表
      this.fileList.push(file);
 
      // 如果是文件夹，将文件夹内的文件添加到待上传列表
      if (file.type === 'application/x-webkit-file-package-axis') {
        file.fileList.forEach(childFile => {
          this.fileList.push(childFile);
        });
      }
 
      // 阻止默认上传行为
      return false;
    },
    uploadFiles(fileList) {
      const currentFile = fileList.shift();
      const formData = new FormData();
      formData.append('file', currentFile.raw); // 或者直接使用currentFile
 
      // 模拟上传文件操作
      // axios.post('upload/url', formData).then(response => {
      //   this.handleSuccess(response.data, currentFile);
      // });
 
      // 递归上传剩余文件
      if (fileList.length > 0) {
        this.uploadFiles(fileList);
      }
    },
  },
};
</script>

在这个示例中，我们定义了fileList来存储待上传的文件。在handleBeforeUpload方法中，我们将文件夹内的所有文件加入到待上传列表中。在handleSuccess方法中，我们移除已上传的文件，并检查是否还有文件待上传，如果有，则递归调用uploadFiles方法继续上传。

注意：示例中的action是一个模拟的URL，你需要替换为实际的文件上传API。实际上，你可能需要使用axios或其他HTTP库来完成真正的上传操作。

在Vue.js中，你可以通过自定义样式来修改el-select和el-input的默认样式。以下是一个简单的例子，展示如何自定义这两个Element UI组件的样式：

<template>
  <div id="app">
    <el-select class="custom-select">
      <el-option value="1">选项1</el-option>
      <el-option value="2">选项2</el-option>
    </el-select>
 
    <el-input class="custom-input"></el-input>
  </div>
</template>
 
<script>
export default {
  name: 'App',
};
</script>
 
<style>
/* 自定义 el-select 样式 */
.custom-select {
  background-color: #f0f0f0; /* 背景色 */
  border-color: #ccc; /* 边框色 */
  border-radius: 4px; /* 边框圆角 */
  /* 其他样式 */
}
 
/* 自定义 el-input 样式 */
.custom-input {
  background-color: #e0e0e0; /* 输入框背景色 */
  border-color: #bbb; /* 输入框边框色 */
  border-radius: 4px; /* 输入框圆角 */
  /* 其他样式 */
}
</style>

在这个例子中，.custom-select和.custom-input分别为el-select和el-input定义了新的样式。你可以根据需要添加更多的CSS属性来自定义这些组件的外观。

下面是一个简化版的下拉选择器组件的实现，使用了Vue.js和CSS，但不是使用Element UI，因为我们要仿造它。

<template>
  <div class="select-container">
    <div
      class="select-trigger"
      @click="toggle"
    >
      {{ selectedOption.label }}
      <i class="select-icon" :class="{ 'el-icon-arrow-down': !isOpen, 'el-icon-arrow-up': isOpen }"></i>
    </div>
    <div
      v-show="isOpen"
      class="select-dropdown"
    >
      <div
        v-for="(option, index) in options"
        :key="index"
        class="select-dropdown-item"
        @click="select(option)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedOption: {},
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    select(option) {
      this.selectedOption = option;
      this.isOpen = false;
    }
  }
};
</script>
 
<style scoped>
.select-container {
  position: relative;
  width: 200px;
}
 
.select-trigger {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
 
.select-icon {
  margin-left: 5px;
  font-size: 12px;
}
 
.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}
 
.select-dropdown-item {
  padding: 5px 15px;
  cursor: pointer;
}
 
.select-dropdown-item:hover {
  background: #f5f7fa;
}
</style>

这个简化版的下拉选择器实现了基本的展开、收起和选项选择功能。你可以通过CSS调整样式以更接近Element UI的风格。

在Vue中使用Element UI的Table组件实现嵌套表格时，可以通过监听展开行的事件来获取数据。以下是一个简单的例子：

1. 首先确保你已经安装并引入了Element UI。
2. 在你的Vue组件中，定义嵌套表格的数据结构。
3. 使用<el-table>组件来展示外层表格，并使用<el-table-column>的type="expand"来定义一个可以展开的列。
4. 在展开列中使用<el-table>来实现嵌套的内容。
5. 监听expand-change事件来获取当展开行时的数据。

<template>
  <el-table :data="tableData" style="width: 100%" @expand-change="handleExpandChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.innerData" style="width: 100%">
          <!-- 定义嵌套表格的列 -->
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          innerData: [
            { date: '2016-05-02', name: '张小刚', address: '上海市普陀区金沙江路 1518 弄' },
            // ... 更多嵌套表格数据
          ]
        },
        // ... 更多外层表格数据
      ]
    };
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        console.log('展开行的数据:', row);
        // 在这里可以执行获取数据的操作
      }
    }
  }
};
</script>

在这个例子中，handleExpandChange方法会在展开行时被调用，你可以在这个方法中执行获取数据的操作。row参数是当前展开行的数据对象，expandedRows是当前展开的所有行的数据数组。

在Vue 3项目中，要使用样式穿透修改Element Plus（Element UI的升级版）的默认样式，可以通过以下方法：

1. 使用深度选择器 >>> 或 /deep/ 来穿透组件边界。
2. 使用CSS变量提供的自定义功能（如果Element Plus组件使用了CSS变量）。

以下是一个示例，假设我们要修改按钮的背景色：

/* 使用深度选择器 */
.el-button {
  >>>.el-button {
    background-color: #f56c6c; /* 修改为红色 */
  }
}
 
/* 或者使用 /deep/ 如果你使用的是scss */
.el-button {
  /deep/ .el-button {
    background-color: #f56c6c; /* 修改为红色 */
  }
}

请注意，Element Plus建议使用CSS变量进行样式自定义，如果可以的话，优先考虑使用这种方法。

如果要使用CSS变量进行样式覆盖，可以在全局样式文件中添加如下代码：

:root {
  --el-button-background-color: #f56c6c; /* 使用CSS变量覆盖按钮背景色 */
}

确保这些样式是全局生效的，可以将它们放在项目的主样式文件中，例如styles/index.scss或main.css。

最后，请确保这些样式规则的加载顺序在Element Plus样式之后，以便覆盖默认样式。