vue中给表格的某一列 添加双击事件，并 结合弹窗进行修改数据

/** 添加账户余额 */
function userBalance(row) {
    reset();
    const userId = row.userId || ids.value;
    getUser(userId).then(response => {
      form.value = response.data;
      Balance.value = true;
      title.value = "修改余额";
    });
}

/** 账户余额修改提交按钮 */
function submitFormuserBalance() {
  proxy.$refs["userBalance"].validate(valid => {
    if (valid) {
      if (form.value.userId != undefined) {
        changeBalance(form.value.userId,form.value.balance).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          Balance.value = false;
          getList();
        }).catch(function () {
          Balance.value = false;
          getList();
        });
      }else{
        proxy.$modal.msgSuccess("修改失败，用户不能为空");
        getList();
      }
    }
  });
};

 

<!-- 表格中的某一列 -->

<el-table-column label="账户余额" align="center" key="balance" prop="balance">
                <template #default="scope">
                    <span @dblclick="userBalance(scope.row)">
                        <el-tag>{{scope.row.balance}}</el-tag>
                    </span>
                </template>
</el-table-column>

<!-- 用户余额修改弹窗 -->
    <el-dialog :title="title" v-model="Balance" width="600px" append-to-body>
      <el-form :model="form" :rules="rules" ref="userBalance" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="余额" prop="balance">
              <el-input v-model="form.balance" placeholder="请输入余额" maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormuserBalance">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

<!--  引入接口方法，这里是修改数据 -->
import { changeBalance } from "@/api/system/user";

// 用户余额修改
export function changeBalance(userId, balance) {
  const data = {
    userId,
    balance
  }
  return request({
    url: '/system/user/changeBalance',
    method: 'put',
    data: data
  })

 

rules: {
    balance: [{ pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, required: true, message: "金额格式错误（最多两位小数）", trigger: "blur" }],
  }