【Element进阶】5、自定义组件与Element UI集成

【Element进阶】自定义组件与Element UI集成

---

系列文章导航：

【Element进阶】1、深入理解Element UI的国际化
【Element进阶】2、Element UI与Vue Router结合
【Element进阶】3、Element UI与Vuex结合
【Element进阶】4、Element UI 复杂表单处理
【Element进阶】5、自定义组件与Element UI集成（本文）
【Element进阶】6、Element UI 高阶数据展示
【Element进阶】7、Element UI 性能优化
【Element进阶】8、Element UI 最佳实践与案例分析

---

在实际项目开发中，我们常常需要创建一些自定义组件，以满足特定的业务需求。Element UI 提供了丰富的基础组件库，我们可以利用这些组件快速构建自定义组件，并与 Element UI 的其他组件无缝集成。本篇文章将详细介绍如何创建自定义组件，以及如何与 Element UI 组件无缝集成。

创建自定义组件

基本概念

自定义组件是指我们根据业务需求自行开发的组件。这些组件可以是简单的按钮、输入框，也可以是复杂的表单、数据展示组件。通过创建自定义组件，我们可以提高代码的复用性和可维护性。

创建一个简单的自定义按钮组件

首先，我们创建一个简单的自定义按钮组件，该组件可以接受不同的样式和点击事件：

<!-- src/components/CustomButton.vue -->
<template>
  <el-button :type="type" :size="size" @click="handleClick">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'medium'
    }
  },
  methods: {
    handleClick(event) {
      this.$emit('click', event);
    }
  }
};
</script>

在这个示例中，我们创建了一个 CustomButton 组件，使用 Element UI 的 el-button 组件作为基础。通过 type 和 size 属性，我们可以控制按钮的样式和大小，并通过 handleClick 方法处理点击事件，并向父组件传递事件。

使用自定义按钮组件

接下来，我们在父组件中使用 CustomButton 组件：

<!-- src/views/ButtonView.vue -->
<template>
  <div>
    <h2>Custom Button</h2>
    <CustomButton @click="handleButtonClick">Click Me</CustomButton>
  </div>
</template>

<script>
import CustomButton from '@/components/CustomButton.vue';

export default {
  name: 'ButtonView',
  components: {
    CustomButton
  },
  methods: {
    handleButtonClick(event) {
      this.$message.success('Button clicked!');
    }
  }
};
</script>

在这个示例中，我们在 ButtonView 组件中引入并使用 CustomButton 组件，并处理按钮的点击事件。

如何与Element UI组件无缝集成

基本概念

与 Element UI 无缝集成意味着自定义组件不仅可以使用 Element UI 的样式和功能，还可以与 Element UI 的其他组件一起使用，保持一致的用户体验和界面风格。

创建一个自定义输入框组件

接下来，我们创建一个自定义输入框组件，该组件可以与 Element UI 的表单组件一起使用：

<!-- src/components/CustomInput.vue -->
<template>
  <el-form-item :label="label" :prop="prop">
    <el-input v-model="inputValue" :placeholder="placeholder"></el-input>
  </el-form-item>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    label: {
      type: String,
      required: true
    },
    prop: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
};
</script>

在这个示例中，我们创建了一个 CustomInput 组件，使用 Element UI 的 el-form-item 和 el-input 组件作为基础。通过 label 和 prop 属性，我们可以控制输入框的标签和验证属性，通过 value 属性实现双向绑定。

使用自定义输入框组件

接下来，我们在父组件中使用 CustomInput 组件，并与 Element UI 的表单组件集成：

<!-- src/views/InputView.vue -->
<template>
  <div>
    <h2>Custom Input</h2>
    <el-form :model="form" :rules="rules" ref="form">
      <CustomInput label="Name" prop="name" v-model="form.name" placeholder="Enter name" />
      <CustomInput label="Email" prop="email" v-model="form.email" placeholder="Enter email" />
```vue
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">Submit</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import CustomInput from '@/components/CustomInput.vue';

export default {
  name: 'InputView',
  components: {
    CustomInput
  },
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      rules: {
        name: [{ required: true, message: 'Please input name', trigger: 'blur' }],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please enter a valid email', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$message.success('Form submitted successfully!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中，我们在 InputView 组件中引入并使用 CustomInput 组件，并与 Element UI 的表单组件集成。在表单中，我们定义了 form 数据对象和 rules 验证规则，并在表单提交时进行验证。

创建更复杂的自定义组件

接下来，我们创建一个更复杂的自定义组件，该组件包含一个可编辑的表格，用户可以添加、编辑和删除表格中的行：

<!-- src/components/EditableTable.vue -->
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="email" label="Email" width="200">
      <template slot-scope="scope">
        <el-input v-model="scope.row.email"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="Actions" width="120">
      <template slot-scope="scope">
        <el-button type="danger" size="mini" @click="removeRow(scope.$index)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" @click="addRow">Add Row</el-button>
</template>

<script>
export default {
  name: 'EditableTable',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: this.value
    };
  },
  watch: {
    tableData: {
      handler(val) {
        this.$emit('input', val);
      },
      deep: true
    }
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', email: '' });
    },
    removeRow(index) {
      this.tableData.splice(index, 1);
    }
  }
};
</script>

在这个示例中，我们创建了一个 EditableTable 组件，使用 Element UI 的 el-table 组件作为基础。通过 addRow 和 removeRow 方法，我们可以动态添加和删除表格中的行。

使用可编辑表格组件

接下来，我们在父组件中使用 EditableTable 组件：

<!-- src/views/TableView.vue -->
<template>
  <div>
    <h2>Editable Table</h2>
    <EditableTable v-model="tableData" />
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
import EditableTable from '@/components/EditableTable.vue';

export default {
  name: 'TableView',
  components: {
    EditableTable
  },
  data() {
    return {
      tableData: [
        { name: 'John Doe', email: 'john@example.com' },
        { name: 'Jane Doe', email: 'jane@example.com' }
      ]
    };
  },
  methods: {
    handleSubmit() {
      console.log('Table data submitted:', this.tableData);
      this.$message.success('Table data submitted successfully!');
    }
  }
};
</script>

在这个示例中，我们在 TableView 组件中引入并使用 EditableTable 组件，并处理表格数据的提交。

完整项目结构

最终的项目结构如下：

src/
|-- components/
|   |-- CustomButton.vue
|   |-- CustomInput.vue
|   |-- EditableTable.vue
|-- views/
|   |-- ButtonView.vue
|   |-- InputView.vue
|   |-- TableView.vue
|-- App.vue
|-- main.js
|-- router.js

通过这个项目结构，我们可以清晰地管理组件和视图，使项目更加模块化和易于维护。

完整示例的 App.vue 和 main.js

为了让整个项目运行起来，我们需要在 App.vue 中配置路由，并展示不同的视图组件。

App.vue

<!-- src/App.vue -->
<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1"><router-link to="/">Custom Button</router-link></el-menu-item>
          <el-menu-item index="2"><router-link to="/input">Custom Input</router-link></el-menu-item>
          <el-menu-item index="3"><router-link to="/table">Editable Table</router-link></el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    }
  }
};
</script>

<style>
.el-menu-demo {
  background-color: #333;
  color: #fff;
}
.el-menu-demo .el-menu-item {
  color: #fff;
}
</style>

main.js

在 main.js 中引入和配置 Element UI、Vue Router：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

router.js

创建 router.js 文件并配置路由：

// src/router.js
import Vue from 'vue';
import Router from 'vue-router';
import ButtonView from '@/views/ButtonView.vue';
import InputView from '@/views/InputView.vue';
import TableView from '@/views/TableView.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'ButtonView',
      component: ButtonView
    },
    {
      path: '/input',
      name: 'InputView',
      component: InputView
    },
    {
      path: '/table',
      name: 'TableView',
      component: TableView
    }
  ]
});

通过上述步骤，我们已经构建了一个包含以下功能的项目：

1. 自定义按钮组件：使用 Element UI 的按钮组件作为基础，创建自定义按钮组件。
2. 自定义输入框组件：使用 Element UI 的表单和输入框组件作为基础，创建自定义输入框组件，并实现双向绑定和验证。
3. 可编辑表格组件：使用 Element UI 的表格组件作为基础，创建可编辑表格组件，支持动态添加和删除表格行。
4. 路由配置：使用 Vue Router 管理不同视图的导航。

结语

通过本章的学习，我们详细了解了如何创建自定义组件，并与 Element UI 组件无缝集成。我们探讨了如何使用 Element UI 的基础组件创建自定义按钮、输入框和可编辑表格组件，以及如何在父组件中使用这些自定义组件，并与 Element UI 的其他组件集成。

通过掌握这些技能，我们可以根据项目需求快速创建和集成自定义组件，提升代码的复用性和可维护性。

在接下来的章节中，我们将继续深入探讨 Element UI 的其他进阶功能，敬请期待！希望这篇文章对你有所帮助，祝你在前端开发的道路上越走越远！