当前位置：首页 > 前端教程

elementui打钩

2026-01-14 22:13:11前端教程

使用 ElementUI 实现打钩功能

在 ElementUI 中，实现打钩功能通常涉及复选框（Checkbox）或表格中的多选功能。以下是几种常见的实现方式：

复选框（Checkbox）实现打钩

通过 el-checkbox 组件实现简单的打钩功能：

<template>
  <el-checkbox v-model="checked">选项</el-checkbox>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

v-model 绑定 checked 变量，控制复选框的选中状态。

表格多选打钩

在表格中启用多选功能，通过 el-table 的 selection-change 事件实现打钩：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ name: '张三' }, { name: '李四' }],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val
    }
  }
}
</script>

type="selection" 列会自动添加复选框，handleSelectionChange 方法会返回选中的数据。

自定义打钩样式

如果需要自定义打钩图标，可以通过插槽实现：

<template>
  <el-checkbox v-model="checked">
    <template #default>
      <i class="custom-check-icon" v-if="checked">✓</i>
      <span>自定义打钩</span>
    </template>
  </el-checkbox>
</template>

通过条件渲染 v-if="checked" 显示自定义打钩图标。

表单验证中的打钩

在表单验证中，可以通过 el-form-item 的 rules 验证复选框：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item prop="agree" label="同意协议">
      <el-checkbox v-model="form.agree"></el-checkbox>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: { agree: false },
      rules: {
        agree: [{ validator: (_, v, cb) => v ? cb() : cb(new Error('请同意协议')) }]
      }
    }
  }
}
</script>

通过自定义验证规则确保用户必须打钩才能提交表单。

elementui打钩