Table of Contents
Introduction
In this article, we going to focus on continue implementing the table component from our previous article Component Series: Element Plus Table part 1.
We are going to focus on several areas of using Vue to support us in implementing a reusable table component. Reusable components are parts of interfaces that are likely to be used in various locations within the projects for those of you who are unfamiliar with the term. Moreover, We are going to tackle those area in Vue to make our table reusable:
- props
- loop
Props
What are props?
Props is short for properties. This is one method that Vue use to transfer data from one component to another.
Working with props, first we need to import defineProps from vue.
Example:
import { defineProps } from "vue";
const props = defineProps({
testProps: String
});
Let's start declaring props in our file directory src/components/TableComponent.vue (add this code to script tags and remove tableData to parent).
<script lang="ts" setup>
import { defineProps } from 'vue';
const props = defineProps<{
tableData: any;
}>();
</script>
What you should have in your script tag in src/components/TableComponent.vue.
According to the description of props, which is a method for transferring data from one component to another, we will import our reusable component to the location of its intended use, which is at src/App.vue.
<template>
<TableComponent :table-data="tableData" />
// as for pass props here we are using ':'
// because we wanted to be dynamic props when we are passing on
</template>
<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
];
</script>
Here is what the output would look like.
Loop
In programming, a loop is a concept that repeats actions until all cycles have been completed.
Why is that important? Imagine that you want to print out a number between 1 and 100. If you were to write a hard code, you would do it by writing the number down one line at a time from 1 to 100. Loop is the way to go if we want the computer to do it for us. And why is this relevant to frontend real world problem? Assume that we want to run through the list of employees in the organization. Since we are unsure of the length of the employee list, we might think of writing a loop to print the entire list of employees. For more information about loops, search the web. Although the notion is used in a variety of programming languages, most of them all share the same for and while loop. So in this case, I'll use Vue to build the loop. The syntax for using the loop in Vue in <template>/template> would look like.
<template>
<li v-for="item in items">
{{ item }}
</li>
</template>
<script setup>
const items = ['Apple', 'Banana', 'WaterMelon'];
</script>
Tips on using Element Plus table and working with slots
Since we are passing on the props to table component, right now it is static. As for the component that actually implements the component, it uses the object you provide as the key for the for loop. Imagine if the props need age key and value to the tableData our table would not be automatically update.
Update src/App.vue.
<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
age: 10,
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
age: 10,
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
age: 10,
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
age: 10,
},
];
</script>
But as you may have noticed, the server's UI does not add the field age. The trick is that we will adapt our table component to our needs using the new keys/values and automatically update the table Display. This also include slots concepts of Vue in this code base, I will explain down below.
<template>
<el-table :data="tableData" style="width: 100%">
<template v-for="value in headerTable" :key="value.name">
<el-table-column :prop="value" :label="value" width="180" />
</template>
</el-table>
</template>
<script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue';
const props = defineProps<{
tableData: any;
}>();
const headerTable = ref();
onMounted(() => {
headerTable.value = Object.keys(props.tableData[0]);
});
</script>
As the code shown we are collecting the keys of the object to one array and loop it in the template slots of Vue (and as shown I selected index 0 of the array of object and assume all the object have the same amount of keys/values. As you can see, as soon as you make changes to the properties from the parent, the table UI will now automatically refresh.
Slots are the ideas of leaving space for the component to fill when they are called. For instance, if you plan to see a movie at the theater, you will undoubtedly reserve a seat. When the time comes, you will sit in the seat you reserved, and once the performance is over, other people can do the same. So the idea is to make an empty box and then wait to put something within it.
Conclusion
In this article, we are discuss how to use Vue and use reusable components. Also, as the code is demonstrated, new terms emerge, such as onMouted which refers to a Vue's life cycle, and ref which refers to a reactive object. I would like to create another series that discusses the depth of Vue using these new terms. On the next article I am going to focus on styles of this table component and focus on conditional rendering in Vue. Here is the code to this article Git.
Happy coding~~~
Top comments (0)