vue动态修改多个组件的class名称，并执行一个不确定参数的方法

女爷i 2023-10-04 20:28 8阅读 0赞

因为我用了elementui的table组件，在组件中的每一行，我渲染了一个icon，每当点击这个icon就要改变这个icon的类，并且发送请求：

![09d209aea7d44ca791457f9bf18d70d4.png][]

如果想要改变这个元素的class，就要通过ref找到这个元素，使用动态ref定义一个唯一的ref引用：

<el-table-column
            align="center"
            label="更新信息"
          >
            <template slot-scope="scope">
              <i
                :ref="'ref' + scope.row.user_name"
                class="el-icon-refresh refresh-info"
                @click="confirmLog(getInfoBtn, scope.row)"
              ></i>
            </template>
          </el-table-column>

然后定义一个同意确认框的方法：...params表示一个可变参数，在传递参数的时候，传递多少个都会被接收到params里面，而params是一个数组，...params表示解包这个数组为一个一个元素，然后通过fun(...params)调用真正的执行函数去执行，执行完成后重新刷新表格数据：this.fetchData()

confirmLog(fun, ...params) {
          this.$confirm('确定执行此操作吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              fun(...params)
              this.fetchData()
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
              this.fetchData()
            })
        },

然后在具体的执行函数里面，修改元素的class样式：

![edfb94e7d1774b8dab8f207425e12e72.png][]

一定要确保user\_name唯一，不然的话，this.$refs\[\`ref$\{userInfo.user\_name\}\`\]得到的是一个数组：

this.$refs[`ref${userInfo.user_name}`].setAttribute(
            'class',
            'el-icon-loading refresh-info'
          )

然后通过setAttribute即可修改class

[09d209aea7d44ca791457f9bf18d70d4.png]: https://img-blog.csdnimg.cn/09d209aea7d44ca791457f9bf18d70d4.png
[edfb94e7d1774b8dab8f207425e12e72.png]: https://img-blog.csdnimg.cn/edfb94e7d1774b8dab8f207425e12e72.png