typescript+element-plus进度条动态传值

在 TypeScript 中使用 Element Plus 的进度条组件可以按照以下步骤进行：

1. 安装 Element Plus 和 TypeScript 的类型声明：

npm install element-plus --save
npm install @types/element-plus --save-dev

2. 在 Vue 组件中引入 Element Plus：

import { defineComponent } from 'vue'
import { ElProgress } from 'element-plus'

export default defineComponent({
  components: { ElProgress },
  setup() {
    return {}
  }
})

3. 在模板中使用 ElProgress 组件，并通过 `:percentage` 属性传递进度值：

<template>
  <div>
    <el-progress :percentage="progress"></el-progress>
    <button @click="increaseProgress">增加进度</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElProgress } from 'element-plus'

export default defineComponent({
  components: { ElProgress },
  setup() {
    const progress = ref(0)

    const increaseProgress = () => {
      progress.value += 10
    }

    return { progress, increaseProgress }
  }
})
</script>

在这个例子中，我们使用了 `ref` 创建响应式的 `progress` 变量，并将其赋值为 0。我们还定义了一个 `increaseProgress` 函数，每次调用时将 `progress` 变量的值增加 10。

在模板中，我们将 `progress` 变量的值通过 `:percentage` 属性传递给 ElProgress 组件，这样进度条就可以根据变量的值动态地更新显示。

注意，这个例子中的 `increaseProgress` 函数只是为了演示如何动态地更新进度条的值，实际使用时需要根据具体的业务逻辑来更新进度条的值。