在使用Element UI的el-table组件时，可以通过设置selection列类型来实现多选功能，并且可以结合el-button组件实现批量删除操作。以下是一个简单的示例，展示了如何在el-table中实现单行删除和多行删除功能：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <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-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      size="small"
      type="danger"
      @click="handleBatchDelete">批量删除</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, /* ...更多数据... */],
      multipleSelection: []
    }
  },
  methods: {
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleBatchDelete() {
      this.multipleSelection.forEach(item => {
        this.tableData = this.tableData.filter(data => data !== item);
      });
      this.multipleSelection = [];
    }
  }
}
</script>

在这个示例中，handleDelete方法用于删除单行数据，handleSelectionChange方法用于获取多选的行数据，handleBatchDelete方法用于批量删除多选的行数据。这些方法依靠JavaScript数组的操作来实现数据的添加和删除。

在Element Plus中，el-input-number组件的宽度可以通过CSS覆盖来修改。你可以通过类选择器或者直接对元素应用内联样式来改变其宽度。

以下是一个CSS样式示例，用于修改el-input-number的宽度：

.el-input-number {
  width: 200px; /* 设置你想要的宽度 */
}

如果你想要针对特定的el-input-number修改宽度，可以添加一个自定义类：

<el-input-number class="custom-width"></el-input-number>

然后在CSS中这样写：

.custom-width {
  width: 200px; /* 特定宽度 */
}

请确保将这段CSS添加到全局样式文件中，或者在组件的<style>标签中使用。这样做可以覆盖默认的Element Plus样式。

ElementUI表单验证错误提示不消失的原因可能有以下几种：

1. 表单项绑定的v-model值未能正确更新，导致验证依据不变。
2. 表单项的prop属性未正确对应到模型中的字段。
3. 表单的model属性未设置或设置错误，导致无法正确定位到绑定的数据。
4. 使用了this.$refs.formName.resetFields()来重置表单，但是没有正确实现。
5. 使用了this.$refs.formName.clearValidate()来清除验证结果，但是没有在更新数据后正确调用。
6. 使用了异步操作更新数据，而验证是同步进行的，导致异步更新导致同步验证的问题。

解决方法：

1. 确保表单项绑定的v-model能够正确反映数据模型的状态。
2. 检查表单项的prop属性是否正确指向了模型中的字段。
3. 确保表单的model属性已正确设置，并且与数据模型对应。
4. 如果使用了resetFields，确保重置逻辑正确实现。
5. 在更新数据后，确保使用validateField或validate方法来手动触发验证。
6. 如果是异步数据更新，确保更新后再进行验证。

示例代码：

// 更新数据后手动触发表单的验证
this.$refs.myForm.validateField('fieldName');
 
// 如果需要重置表单并清除验证结果
this.$refs.myForm.resetFields();
this.$refs.myForm.clearValidate();

确保在数据更新后，使用validateField或validate方法来手动触发表单项的验证。如果使用了异步数据更新，请在数据更新后调用验证方法。

Vue 3 使用 Element Plus 时组件显示为英文的问题通常是因为没有正确设置国际化语言。Element Plus 支持多种语言，默认为英文。要解决这个问题，你需要确保你已经按照以下步骤设置了正确的语言：

1. 安装 Vue I18n 插件（如果尚未安装）：

npm install vue-i18n@next

2. 配置 Vue I18n 插件，并设置 Element Plus 的语言：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const messages = {
  'en-US': {
    ...require('element-plus/dist/locale/en-US').default,
  },
  'zh-CN': {
    ...require('element-plus/dist/locale/zh-CN').default,
  }
}
 
const i18n = createI18n({
  locale: 'zh-CN', // 设置为你需要的语言
  messages,
})
 
const app = createApp(App)
app.use(i18n)
app.use(ElementPlus)
app.mount('#app')

在这个例子中，我们导入了 Element Plus 的中文本地化消息，并通过 Vue I18n 插件的 createI18n 函数创建了一个国际化配置，其中 locale 设置为 'zh-CN' 表示我们使用的是简体中文。然后，我们将 Vue I18n 实例通过 app.use(i18n) 注册到 Vue 应用中。

确保你的 Vue 3 项目中已经按照以上步骤设置了 Element Plus 的语言，组件就应该显示为你所设置的语言了。

在Element UI的el-table组件中实现两行表头，可以通过嵌套el-table-column来实现。下面是一个简单的示例代码：

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

在这个例子中，我们定义了一个两行表头的el-table，第一行有一个el-table-column用于显示“主题”，第二行有两个el-table-column分别用于显示“日期”和“详细信息”。在“详细信息”这一列下，又嵌套了两个el-table-column分别用于显示“姓名”和“地址”。

你可以根据自己的需求调整表头的内容和数据结构。

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :top="top"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '30%'
    },
    top: {
      type: String,
      default: '15vh'
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleCancel() {
      this.handleClose();
    },
    handleConfirm() {
      this.$emit('confirm');
      this.handleClose();
    }
  }
}
</script>

这个代码实例展示了如何使用Vue和ElementUI进行对话框组件的二次封装。通过定义MyDialog组件，我们可以复用对话框的功能和样式，并且可以通过props传递标题、可见性、宽度和位置等属性，同时定义了confirm和cancel事件处理函数，这些函数负责关闭对话框并可以进一步处理用户的确认或取消操作。

在Element Plus UI中使用el-table组件时，如果你遇到了selection-change事件重复执行的问题，或者在选择checkbox时也触发了该事件，可能是由于以下原因造成的：

1. 多次绑定了selection-change事件。
2. 在事件处理函数中错误地再次触发了该事件。
3. 使用了v-for循环在表格中渲染行，并且在循环内部不正确地使用了key。

解决方法：

1. 确保selection-change事件只绑定一次。
2. 检查selection-change事件处理函数，确保没有在函数内部再次触发该事件。
3. 如果使用了v-for，确保为每个循环项提供了唯一的key值，并且不会在事件处理函数中错误地触发事件。

示例代码：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据项
      ],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      // 确保不在此处再次调用 `selection-change` 事件
    }
  }
};
</script>

确保你遵循了以上建议，应该能够解决selection-change事件重复执行的问题。如果问题依然存在，可能需要进一步检查代码逻辑或提供更多上下文信息。

这个问题看起来是要求提供一个Spring Boot, Vue.js, MyBatis Plus, Element UI和axios的项目实战记录。由于篇幅所限，我将提供一个简化的实战记录，主要关注项目设置和关键代码。

项目设置

1. 使用Spring Boot作为后端框架。
2. 使用MyBatis Plus作为ORM工具。
3. Vue.js作为前端框架，搭配Element UI进行快速开发。
4. axios用于前后端通信。

关键代码

后端（Spring Boot）:

@RestController
@RequestMapping("/api/items")
public class ItemController {
    @Autowired
    private ItemService itemService;
 
    @GetMapping
    public ResponseEntity<List<Item>> queryItems() {
        List<Item> items = itemService.list();
        return ResponseEntity.ok(items);
    }
}

前端（Vue.js）:

<template>
  <div>
    <el-button @click="fetchItems">加载商品列表</el-button>
    <el-table :data="items">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    fetchItems() {
      this.axios.get('/api/items')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error('Error fetching items:', error);
        });
    }
  }
};
</script>

注意：

• 以上代码仅展示了核心功能，并省略了各种配置和依赖。
• 实战记录的目的是为了展示项目的设置和关键步骤，并不是提供可立即运行的代码。
• 实战记录应该详细记录项目的设置过程、遇到的问题及其解决方案，以及学习到的经验和教训。

在Element UI的el-table组件中嵌套表格时，如果需要在外层操作按钮如el-switch开关来控制内层展开行的显示和隐藏，可以通过el-switch的变化来控制内层表格的显示状态。

以下是一个简单的例子，展示了如何通过el-switch控制内层表格的行展开：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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-column label="操作">
      <template slot-scope="scope">
        <!-- 控制展开的开关 -->
        <el-switch
          v-model="scope.row.expanded"
          @change="handleSwitchChange(scope.row)">
        </el-switch>
      </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 弄' },
            // ... 更多内层数据
          ],
          expanded: false, // 控制展开状态
        },
        // ... 更多数据
      ],
    };
  },
  methods: {
    handleSwitchChange(row) {
      row.expanded = !row.expanded; // 切换展开状态
    },
  },
};
</script>

在这个例子中，每一行数据都有一个expanded属性，用来控制该行的展开状态。el-switch组件的v-model绑定到了expanded属性上，通过@change事件监听开关状态的变化，并调用handleSwitchChange方法来更新行的展开状态。

前后端不分离的项目中，如果你想在Vue.js项目中使用Element UI，可以按照以下步骤进行：

1. 安装Element UI:

npm install element-ui --save

2. 在你的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'
 
Vue.use(ElementUI)
 
new Vue({
  el: '#app',
  render: h => h(App)
})

3. 在你的Vue组件中使用Element UI组件，例如使用一个Element UI的按钮：

<template>
  <div>
    <el-button type="primary">点击我</el-button>
  </div>
</template>
 
<script>
export default {
  // 组件逻辑
}
</script>

确保你的项目中已经正确安装了Vue CLI和Element UI。以上步骤将Element UI添加到你的Vue.js项目中，你可以在任何组件内使用它提供的UI组件。