在Element UI的el-table组件中，当单元格内容超过一定长度时显示el-tooltip提示，可以通过el-tooltip组件配合el-table-column的render-header属性来实现。

以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号'
      }, {
        date: '2016-05-04',
        name: '张小刚',
        address: '上海市普陀区金沙江路1517号'
      }, {
        date: '2016-05-01',
        name: '李小红',
        address: '上海市普陀区金沙江路1519号'
      }]
    }
  }
}
</script>

在这个例子中，show-overflow-tooltip属性被添加到每一个el-table-column中，这样当单元格内容超出列宽时，就会自动显示el-tooltip。

注意：el-table的show-header-overflow-tooltip属性可以用来设置表头的tooltip，但它在某些版本的Element UI中可能不起作用，你可以通过render-header属性自定义表头工具提示。

在Element-UI的el-select组件中实现多选回显并能够重新选择和更改时，确保你已经正确地使用了v-model来双向绑定选中的值，并且为el-select设置了multiple属性。

以下是一个简单的例子：

<template>
  <el-select v-model="selectedValues" multiple placeholder="请选择">
    <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 {
      selectedValues: ['value1', 'value2'], // 这里是回显的值，应该是一个数组
      options: [
        { label: '选项1', value: 'value1' },
        { label: '选项2', value: 'value2' },
        { label: '选项3', value: 'value3' }
      ]
    };
  }
};
</script>

确保selectedValues是一个数组，并且包含了你想要回显的值。用户可以继续选择或去掉选择，这将更新selectedValues数组的内容。如果你的回显数据不是数组，那么你需要根据实际情况进行转换，以确保它能够正确地在界面上显示并且可以重新编辑。

这个问题看起来是要求构建一个使用Node.js、Vue.js和Element UI的美容化妆品商城系统。由于这是一个较为复杂的项目，我将提供一个简化版的解决方案和核心代码示例。

技术栈：

• Node.js (使用Express.js框架)
• Vue.js (使用Vue CLI创建项目)
• Element UI (Vue组件库)

步骤：

1. 安装Node.js和Vue CLI。
2. 创建新的Vue项目。
3. 添加Element UI依赖。
4. 使用Element UI组件构建商城界面。
5. 设置Node.js服务器，使用Express.js。
6. 连接前后端。
7. 实现产品数据的增删改查功能。
8. 部署（如果需要）。

代码示例：

# 安装Vue CLI
npm install -g @vue/cli
 
# 创建新的Vue项目
vue create my-beauty-shop
 
# 进入项目目录
cd my-beauty-shop
 
# 添加Element UI
vue add element

在Vue组件中使用Element UI构建界面：

<template>
  <el-button @click="buyProduct">购买</el-button>
</template>
 
<script>
export default {
  methods: {
    buyProduct() {
      // 处理购买逻辑
    }
  }
}
</script>

设置Express.js服务器：

const express = require('express');
const app = express();
 
// 中间件
app.use(express.json());
 
// 连接MongoDB数据库（使用mongoose等）
 
// API路由
app.get('/api/products', (req, res) => {
  // 查询产品
});
 
app.post('/api/products', (req, res) => {
  // 新增产品
});
 
app.put('/api/products/:id', (req, res) => {
  // 更新产品
});
 
app.delete('/api/products/:id', (req, res) => {
  // 删除产品
});
 
// 启动服务器
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

这只是一个简化的示例，实际项目中你需要实现更多功能，比如产品详情页、购物车、支付系统等。

注意： 实际项目中，你需要连接数据库（如MongoDB），实现产品数据的持久化存储，并且要考虑如何处理购买逻辑、支付安全等问题。这里没有包含这些细节，因为它们会使答案过于冗长。

Element Plus 是 Element UI 的 Vue 3 版本。以下是一个简单的 Vue 3 应用程序示例，演示如何使用 Element Plus 进行国际化处理。

首先，确保安装了 Element Plus：

npm install element-plus --save

然后，在 Vue 应用程序中使用：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn';
 
const app = createApp(App);
 
app.use(ElementPlus, {
  locale,
  size: 'small' // 设置默认的组件大小
});
 
app.mount('#app');

在组件中使用 Element Plus 组件：

<template>
  <el-button @click="changeLanguage('en')">English</el-button>
  <el-button @click="changeLanguage('zh-cn')">中文</el-button>
  <el-config-provider :locale="locale">
    <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
  </el-config-provider>
</template>
 
<script>
import { ref } from 'vue';
import { ElConfigProvider } from 'element-plus';
import { DatePicker } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
 
export default {
  components: {
    ElConfigProvider,
    'el-date-picker': DatePicker
  },
  setup() {
    const date = ref(null);
    const locale = ref(zhCn);
 
    const changeLanguage = (lang) => {
      switch (lang) {
        case 'en':
          locale.value = en;
          break;
        case 'zh-cn':
          locale.value = zhCn;
          break;
        default:
          locale.value = zhCn;
      }
    };
 
    return { date, locale, changeLanguage };
  }
};
</script>

在这个例子中，我们使用了 el-config-provider 组件来设置 Element Plus 的国际化配置。通过点击按钮切换语言，动态更新配置以实现国际化的效果。

在Vue中使用Element UI的el-table时，如果你想要点击编辑表格中的单元格内容，可以使用el-table-column的template或scoped-slot来自定义单元格的内容，包括添加编辑按钮和实现编辑逻辑。

以下是一个简单的例子，展示了如何在点击单元格后进入编辑模式：

<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 label="操作" width="180">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.edit"
          v-model="scope.row.name"
          size="small"
          @blur="handleSave(scope.row)"
        ></el-input>
        <span v-else>{{ scope.row.name }}</span>
        <el-button
          @click="handleEdit(scope.row)"
          type="text"
          size="small"
          icon="el-icon-edit"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          edit: false
        },
        // ... 其他数据
      ]
    }
  },
  methods: {
    handleEdit(row) {
      row.edit = true;
      this.$set(this.tableData, this.tableData.indexOf(row), row);
    },
    handleSave(row) {
      row.edit = false;
    }
  }
}
</script>

在这个例子中，我们定义了一个带有编辑状态的tableData数组。在el-table-column中，我们使用v-if来判断是否处于编辑状态。如果是，则显示el-input组件让用户编辑；如果不是，则显示文本内容。编辑按钮触发handleEdit方法，将对应行的edit属性设置为true，进入编辑模式。编辑完成后，当el-input失去焦点(@blur)时，触发handleSave方法，保存更改，并退出编辑模式。

在Element UI的Table组件中，动态列切换时出现样式错位问题通常是由于列的动态渲染导致的。这种问题可以通过以下方法解决：

1. 确保在动态添加或删除列时，对Vue的响应式数据进行了正确的操作。
2. 使用Vue.set方法来确保视图能够响应式地更新。
3. 在列数据变化后，调用this.$nextTick()方法，在DOM更新完成后执行必要的操作，如重新计算表格宽度等。

下面是一个简单的示例代码，演示如何在Element UI的Table组件中动态切换列，并保持样式的一致性：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in dynamicColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据项
      ],
      dynamicColumns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' }
      ]
    };
  },
  methods: {
    toggleColumn(column) {
      const index = this.dynamicColumns.findIndex(c => c.prop === column.prop);
      if (index !== -1) {
        this.dynamicColumns.splice(index, 1);
      } else {
        this.dynamicColumns.push(column);
      }
    }
  }
};
</script>

在这个例子中，toggleColumn方法用于动态添加或删除列。确保在操作dynamicColumns数组时，每个列对象的prop属性是唯一的，以便Vue可以追踪每列的状态。使用v-for指令来渲染dynamicColumns数组中的列，并为每个列指定一个唯一的key属性。这样可以避免因列切换导致的样式错位问题。

在Vue 3和Element Plus中，要在刷新页面后保持el-menu的选中状态，可以使用Vue的ref来保存选中状态，并在组件加载时（如onMounted钩子中）恢复这个状态。

以下是一个简单的示例：

<template>
  <el-menu
    :default-active="activeMenu"
    @select="handleSelect"
  >
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-menu-item index="2">订单管理</el-menu-item>
    <el-menu-item index="3">配置中心</el-menu-item>
    <el-menu-item index="4">日志管理</el-menu-item>
  </el-menu>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
 
const activeMenu = ref('');
 
const handleSelect = (key, indexPath) => {
  activeMenu.value = key;
};
 
const route = useRoute();
 
onMounted(() => {
  // 根据当前路由设置默认选中
  activeMenu.value = route.path;
});
 
// 如果需要在页面刷新后保留状态，可以使用 localStorage 或 sessionStorage 存储状态
window.addEventListener('beforeunload', () => {
  localStorage.setItem('activeMenu', activeMenu.value);
});
 
onMounted(() => {
  const storedActiveMenu = localStorage.getItem('activeMenu');
  if (storedActiveMenu) {
    activeMenu.value = storedActiveMenu;
  }
});
</script>

在这个示例中，我们使用了ref来创建响应式的activeMenu变量，它存储了当前选中的菜单项的index。在el-menu上，我们将default-active绑定到activeMenu上，这样在组件加载时会自动将对应的菜单项设置为选中状态。

同时，我们在组件加载（onMounted钩子）后从localStorage中尝试读取之前存储的选中状态，并更新activeMenu的值。

当用户选择其他菜单项时，handleSelect会被调用，并更新activeMenu的值。

注意：为了简化示例，没有包含所有可能的细节，比如错误处理和生产环境的存储策略。在实际应用中，你可能需要添加额外的逻辑来处理存储和恢复选中状态时的异常情况。

在使用iview或element-ui的DatePicker组件时，v-model的用法和注意事项如下：

1. 确保你使用的是最新版本的iview或element-ui。
2. 使用v-model进行数据双向绑定时，确保你的数据是可响应的。
3. 如果你使用的是element-ui，请确保你使用的是正确的组件名称el-date-picker。
4. 对于iview，确保你使用的是type属性来指定日期选择器的类型，如type="date"。
5. 如果你需要使用时间选择器，请确保你的type属性设置正确，如type="datetime"。
6. 如果你需要在一个表单中使用多个DatePicker，请为每个DatePicker提供一个唯一的v-model。
7. 如果你在使用iView的DatePicker，请确保你使用的是v-model.trim来自动去除输入框中的前后空格。

以下是一个使用iview DatePicker组件的例子：

<template>
  <DatePicker type="date" v-model="selectedDate" placeholder="Select date"></DatePicker>
</template>
 
<script>
export default {
  data() {
    return {
      selectedDate: ''
    };
  }
};
</script>

以下是一个使用element-ui DatePicker组件的例子：

<template>
  <el-date-picker v-model="selectedDate" type="date" placeholder="Select date"></el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      selectedDate: ''
    };
  }
};
</script>

在这两个例子中，selectedDate是绑定到DatePicker的v-model的，它将保存选定的日期。当用户选择一个日期时，selectedDate将自动更新为相应的日期字符串。

// nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    plugins: [
      // 使用 Element Plus 的插件
      createElementPlusPlugin()
    ],
  },
  buildModules: [
    '@nuxt/postcss8',
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
  modules: [
    // 如果需要使用 Element Plus 的按需加载，可以使用以下配置
    '@element-plus/nuxt',
  ],
  // 配置 Element Plus 的按需加载
  elementPlus: {
    componentSize: 'small',
    // 需要按需加载的组件
    customComponent: {
      messageBox: true,
    },
  },
  // 其他配置...
});

这个配置文件展示了如何在Nuxt3项目中集成Vite、Pinia和Element Plus。其中vite字段用于配置Vite插件，buildModules用于配置Nuxt的模块，modules用于配置Nuxt模块的依赖，elementPlus用于配置Element Plus插件的选项。

在前端，你可以使用两种方式来上传文件：使用表单（FormData）或者使用Blob流。

1. 使用表单（FormData）

HTML部分：

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="file" name="file"/>
    <input type="submit" value="Upload"/>
</form>

JavaScript部分：

document.getElementById('uploadForm').onsubmit = function(e) {
    e.preventDefault();
    var formData = new FormData(this);
 
    fetch('/your-upload-url', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
};

2. 使用Blob流

JavaScript部分：

var file = document.getElementById('file').files[0];
 
var reader = new FileReader();
reader.onload = function(e) {
    var blob = new Blob([e.target.result]);
 
    var formData = new FormData();
    formData.append('file', blob, 'filename');
 
    fetch('/your-upload-url', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
};
 
reader.readAsArrayBuffer(file);

在这两种方法中，你都可以使用fetch API来发送请求。这是目前在前端最常用的方式。你需要替换'/your-upload-url'为你的实际上传地址。

注意：这两种方法都需要后端有相应的处理上传文件的逻辑。