Vue3.0 + Ts 项目使用element-plus 自动按需导入 使用v-loading报错

问题展示：

使用v-loading报错 无法找到样式 element-plus/es/components/loading-directive/style/css

解决办法：

element-plus版本：

"element-plus": "^2.1.9"

 "unplugin-auto-import": "^0.7.1",
 "unplugin-vue-components": "^0.19.3"

使用正则表达式，排除loading-directive的样式 exclude: new RegExp(/^(?!.loading-directive).$/)

 configureWebpack: (config) => {
    // Element-plus 按需引入配置
    config.plugins.push(
      AutoImport({
        resolvers: [ElementPlusResolver({
          exclude: new RegExp(/^(?!.*loading-directive).*$/)
        })]
      })
    )
    config.plugins.push(
      Components({
        resolvers: [ElementPlusResolver()]
      })
    )
  }

然后 在组件中使用 v-loading就可以正常使用。

效果展示：

<el-table
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

Ps：可以自定义加载中组件的文字，图标，以及背景颜色。具体可参照Element-plus官方文档。