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

elementui绑定

2026-03-06 05:16:26前端教程

ElementUI 数据绑定方法

ElementUI 是基于 Vue.js 的组件库，数据绑定主要遵循 Vue 的响应式原理。以下是常见的绑定方式：

表单组件双向绑定 使用 v-model 指令实现表单输入双向绑定：

<el-input v-model="inputValue"></el-input>

数据需在 Vue 实例的 data 中声明：

data() {
  return {
    inputValue: ''
  }
}

动态属性绑定 通过 v-bind 或简写 : 绑定组件属性：

elementui绑定

<el-button :disabled="isDisabled">按钮</el-button>

事件绑定 使用 v-on 或简写 @ 绑定事件：

<el-button @click="handleClick">点击</el-button>

表格数据绑定 el-table 通过 data 属性绑定数组数据：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
</el-table>

自定义组件绑定 父子组件通信通过 props 和 $emit：

elementui绑定

<!-- 父组件 -->
<child-component :value="parentValue" @update="handleUpdate"></child-component>

<!-- 子组件 -->
<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newVal) {
      this.$emit('update', newVal)
    }
  }
}
</script>

特殊组件绑定技巧

多选组件绑定 el-checkbox-group 需绑定数组：

<el-checkbox-group v-model="checkedList">
  <el-checkbox label="option1"></el-checkbox>
</el-checkbox-group>

日期选择器绑定 el-date-picker 支持日期对象或字符串格式：

<el-date-picker v-model="dateValue" type="date"></el-date-picker>

表单验证绑定 结合 el-form 的 rules 属性：

<el-form :model="form" :rules="rules">
  <el-form-item prop="name" :rules="rules.name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>