要在Vue 3项目中安装ElementPlus，你需要按照以下步骤操作：

1. 打开终端或命令提示符。
2. 确保你的终端当前位于Vue 3项目的根目录下。
3. 运行以下命令来安装ElementPlus：

npm install element-plus --save
# 或者使用yarn
yarn add element-plus

4. 在你的Vue 3项目中全局引入ElementPlus。打开项目中的main.js或main.ts文件，然后添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

现在ElementPlus应该已经成功安装并在你的Vue 3项目中可用了。你可以开始在你的组件中使用ElementPlus提供的组件了。

Element UI的el-table组件默认是列表形式展示数据，不支持直接的横向展示。如果你想要横向展示表格数据，可以通过自定义列模板（<el-table-column>的template属性）来实现。

以下是一个简单的例子，展示如何通过自定义列模板来横向展示表格数据：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
    <el-table-column label="配送信息" width="300">
      <template slot-scope="scope">
        <div>
          <span>姓名: {{ scope.row.name }}</span>
          <span style="margin-left: 20px;">电话: {{ scope.row.phone }}</span>
        </div>
      </template>
    </el-table-column>
    <!-- 其他需要展示的数据可以继续添加 el-table-column -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          phone: '1234567890',
        },
        // ... 其他数据
      ],
    };
  },
};
</script>

在这个例子中，我们定义了两列：日期和配送信息。配送信息列通过template属性定义了一个自定义模板，在模板中我们将name和phone横向并排展示。你可以根据实际需求添加更多的数据列，并通过类似的方式进行横向展示。

在Element UI中，要实现el-table-column表头换行，可以通过在表头内容中使用<br>标签来手动换行。同时，可以通过scoped slot自定义表头，并通过sortable属性来控制排序图标的位置。

以下是一个实现表头换行和自定义排序图标位置的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
      <template slot="header" slot-scope="scope">
        自定义<br>标题
        <i :class="sortIcon(scope.column.order)"></i>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02' }, { date: '2016-05-04' }],
    };
  },
  methods: {
    sortIcon(order) {
      if (order === 'ascending') {
        return 'el-icon-caret-top';
      } else if (order === 'descending') {
        return 'el-icon-caret-bottom';
      } else {
        return 'el-icon-arrow-up el-icon--right'; // 默认图标
      }
    },
  },
};
</script>

在这个例子中，el-table-column的label属性中使用了<br>来实现表头的换行。通过<template slot="header">我们自定义了表头内容，并且通过scope.column.order监听排序状态，动态改变排序图标的类名。

由于篇幅所限，以下仅展示如何使用Express.js和Vue.js创建一个简单的文件上传接口，以及如何在Vue应用中使用Element UI进行文件上传。

后端 (Express.js):

安装express和multer：

npm install express multer

创建一个简单的服务器，并设置multer进行文件上传：

const express = require('express');
const multer = require('multer');
const app = express();
 
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 确保这个文件夹已经存在
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})
 
const upload = multer({ storage: storage })
 
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send('No file uploaded.');
  }
  res.send('File uploaded successfully.');
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

前端 (Vue.js + Element UI):

安装vue和element-ui：

npm install vue element-ui

在Vue组件中使用Element UI的Upload组件：

<template>
  <el-upload
    class="upload-container"
    action="http://localhost:3000/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
import { Upload, Button } from 'element-ui'
export default {
  components: {
    'el-upload': Upload,
    'el-button': Button
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      console.error('Error uploading file:', err);
    },
    beforeUpload(file) {
      // 在这里可以添加文件上传前的校验逻辑
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
}
</script>

确保你的Vue项目中的main.js引入了Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
 
Vu

在Element UI中，close-on-click-modal属性用于控制是否可以通过点击遮罩层来关闭对话框。如果设置为false，意味着点击遮罩层时不会关闭对话框。

如果你发现close-on-click-modal="false"不生效，可能的原因和解决方法如下：

1. 确保使用的是Element UI的正确版本：这个属性在较新的版本中可能已经被修改或者重命名。请检查你的Element UI版本，确保它是支持close-on-click-modal属性的。
2. 检查属性的拼写和使用位置：确保属性拼写正确，并且在正确的组件上使用。它应该作为<el-dialog>组件的一个属性。
3. 检查父组件的状态管理：如果使用Vuex等状态管理工具，确保不是在某个状态更新导致对话框重新渲染时，属性设置被覆盖。
4. 检查样式和覆盖：有时候CSS样式可能会导致点击事件没有正确触发或者遮罩层不响应点击事件。检查是否有CSS样式覆盖了默认行为。
5. 查看Element UI的更新日志：如果你使用的是一个较旧的版本，可能在新版本中这个属性已经被修复。

如果上述方法都不能解决问题，可以尝试在Element UI的GitHub仓库中搜索相关的issue，或者在开发者社区询问，也可以考虑升级到最新版本的Element UI。

在 Element Plus 的 el-table 组件中，可以通过设置 el-table 的 row-key 属性和使用 el-table-column 的 type="selection" 来实现行的多选和单选功能。

以下是一个简单的例子，展示了如何使用 Element Plus 的 el-table 组件实现行的多选和单选：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    // 其他数据
  },
  // 其他数据...
]);
 
const selection = ref([]);
 
const handleSelectionChange = (val) => {
  selection.value = val;
};
 
const handleRowClick = (row, column, event) => {
  if (selection.value.length === 0 || selection.value[0].id !== row.id) {
    selection.value = [row];
  } else {
    selection.value = [];
  }
};
</script>

在这个例子中：

• row-key 属性用于指定每行数据的唯一键，这里假设每行数据都有一个 id 属性。
• el-table-column 的 type="selection" 用于创建多选框列。
• 使用 @selection-change="handleSelectionChange" 监听选中项的变化，并将当前选中的行数据存储在 selection 变量中。
• 使用 @row-click="handleRowClick" 监听行点击事件，实现单选逻辑：如果当前没有选中项，或者点击的行不是当前选中项，则选中该行；如果点击的行已经选中，则取消选中。

这样就实现了表格行的多选和单选功能。

在 Element UI 的 el-table 组件中，可以使用 selectable 属性来定义是否可选。你可以通过这个属性结合 row 对象来根据数据状态禁用部分行的选择框。

以下是一个示例代码：

<template>
  <el-table
    :data="tableData"
    @select="handleSelect"
    @select-all="handleSelectAll"
    :selectable="rowSelectable"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象
      ]
    };
  },
  methods: {
    rowSelectable(row, index) {
      // 根据 row 的状态返回 true 或 false
      // 例如，如果你想根据状态字段 status 来判断是否可选：
      return row.status === 'active';
    },
    handleSelect(selection, row) {
      // 处理选中事件
    },
    handleSelectAll(selection) {
      // 处理全选事件
    }
  }
};
</script>

在这个示例中，rowSelectable 方法根据行数据的 status 字段决定该行是否可被选中。如果 status 是 active，则该行的选择框可用，否则不可用。你可以根据实际的数据状态字段进行调整。

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
  <el-dialog :visible.sync="dialogVisible" @close="handleDialogClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ]
        },
        dialogVisible: false
      };
    },
    methods: {
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('验证失败');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.form.resetFields();
      },
      handleDialogClose() {
        this.resetForm();
      }
    }
  };
</script>

这段代码展示了如何在Vue中使用Element UI的表单验证功能，并在对话框关闭时重置表单验证。el-form 组件使用了:model来绑定表单数据，使用:rules来绑定表单验证规则，并通过ref属性来引用表单实例。el-form-item组件使用prop属性指定要验证的字段。el-button 触发表单提交或重置，el-dialog 组件使用:visible.sync来控制对话框的显示与隐藏，并定义了一个close事件处理函数来在对话框关闭时重置表单。

在Element UI中，如果你想要为一个元素设置滚动条并且自定义滚动条的样式，你可以使用<el-scrollbar>组件。以下是一个简单的例子：

1. 首先，确保你已经在项目中安装并引入了Element UI。
2. 在你的Vue组件中，使用<el-scrollbar>包裹需要滚动的内容。
3. 使用CSS可以自定义滚动条的样式。

<template>
  <el-scrollbar class="custom-scrollbar">
    <!-- 这里是你需要滚动显示的内容 -->
    <p v-for="item in 100" :key="item">{{ item }}</p>
  </el-scrollbar>
</template>
 
<style>
/* 自定义滚动条样式 */
.custom-scrollbar .el-scrollbar__bar {
  background-color: #d3dce6; /* 滚动条颜色 */
}
 
.custom-scrollbar .el-scrollbar__thumb {
  background-color: #babac3; /* 滚动条滑块颜色 */
}
 
/* 鼠标悬停滚动条时的样式 */
.custom-scrollbar .el-scrollbar__bar:hover {
  background-color: #a6a6a6;
}
 
/* 鼠标悬停滚动条滑块时的样式 */
.custom-scrollbar .el-scrollbar__thumb:hover {
  background-color: #8b8b8b;
}
</style>

在上面的代码中，.custom-scrollbar是用来给<el-scrollbar>元素添加自定义样式的类。你可以根据需要修改滚动条和滑块的样式。

请注意，Element UI的滚动条样式是基于其默认的样式变量来设置的，如果需要更深度的自定义，可能需要在Element UI的样式变量中覆盖相应的值。

在Element UI中，要实现两个<el-table>组件的数据联动，可以通过使用v-model或者:data属性来实现。以下是一个简单的例子，展示了如何实现两个表格之间数据的联动。

<template>
  <div>
    <el-table
      :data="tableData1"
      @selection-change="handleSelectionChange1"
    >
      <!-- 表格列定义 -->
    </el-table>
 
    <el-table
      :data="tableData2"
      @selection-change="handleSelectionChange2"
    >
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData1: [
        // 数据项
      ],
      tableData2: [
        // 数据项
      ],
      selectedRows1: [],
      selectedRows2: []
    };
  },
  methods: {
    handleSelectionChange1(val) {
      this.selectedRows1 = val;
      // 联动更新tableData2
      this.tableData2 = this.selectedRows1.map(row => ({...row}));
    },
    handleSelectionChange2(val) {
      this.selectedRows2 = val;
      // 联动更新tableData1
      this.tableData1 = this.selectedRows2.map(row => ({...row}));
    }
  }
};
</script>

在这个例子中，两个表格分别绑定了tableData1和tableData2作为它们的数据源。当其中一个表格的选择发生变化时，通过@selection-change事件处理函数handleSelectionChange1和handleSelectionChange2来更新相应的数据集，并且这种变化会实时地反映到另一个表格的数据源上。这样就实现了两个表格之间数据的联动。