DEV Community: Rax

Component Series: Element Plus Table part 3

Rax — Tue, 07 Mar 2023 11:55:12 +0000

Introduction
Global styling
Local styling
Importing to App.vue
Start working on scoped styling
Conclusion

Introduction

We will concentrate on implementing the table component from our previous article, Component Series: Element Plus Table part 2, in this article. We'll discuss styling in Vue in this article. The concepts we'll cover include global and local styling. We'll also learn how to use the class defined by Element Plus for our customized purposes.

Global styling

Global styling refers to the strategy of building a styling outline for your application that allows for multiple base styles that can be updated later in the development stage.
As if you are look closely we already used this strategy since the first article, since we installed Element Plus which in src/main.js

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

createApp(App).use(ElementPlus).mount('#app');

However, there are 3 commons way to import style(s) class in Vue:

Import in the root file src/main.js.
Use <style> tag without using key word scoped.
Use pseudo-class in <style scoped> by using :global(.className)

If you examine the node_modules directory, you will see a folder directory called element-plus, and if you look at the relative path in this project, node moduleselement-plusdistindex.css you will see a collection of CSS code that has been predefined by the developer who built the framework. And if you successfully open the file index.css you would see this

I understand that it appears to have a lot of code, but since this is a component-based framework, the styling will be added when you call the component, along with the component's import. It is advantageous to use a component-based framework in any frontend framework because it speeds up prototyping; however, you must adapt the component to fit your needs and preferences.

Local styling

In contrast to global, this strategy only affects the current component that you imported. In other words, I'm going to create one more component to demonstrate this effect in your application since our component series currently only has one component (the table). Therefore, I'll add a new component to components/NewTestTableComponent.vue. First, let's copy the copy from components/TableComponent.vue to the new component which is components/NewTestTableComponent.vue.

<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>

After that we are going to add style tag in the new component

<style scope>
</style>

Here is what the full code looked like in the components/NewTestTableComponent.vue

<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>
<style scope></style>

Importing to App.vue

Full code of src/App.vue after import


<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 

  <NewTestTableComponent :table-data="tableData" />
</template>

<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
import NewTestTableComponent from './components/NewTestTableComponent.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>

Start working on scoped styling

Currently, it is difficult to distinguish between the two because of the table

I am going to add on some styling in the components/NewTestTableComponent.vue,

<template>
  <el-table :data="tableData" style="width: 100%" class="bg-table">
    <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>
<style scope>
.bg-table {
  background-color: red;
}
</style>

After that, the outcome would appear as follows. (Despite the fact that I use the class in another component, it still has restrictions.)

But because our table has two displays that make them both look unfriendly, I'm going to achieve this by applying customized classes and also working with predefine classes that Element Plus provides.
I am going to inspect the html in my browser by going to chrome developer tool by clicking F12 or right click go to inspect, if you still can't open you can have a quick look at this link that is from google itself Open google developer tool.
After open it up

First you click this one for targeting the HTML element.

Then after hovering around you will start to see this get highlight

And I wanted to customize this class.

<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>
<style scoped>
.el-table tr {
  background-color: red !important;
}
</style>

As you can see I have remove one class from this file NewTestTableComponent.vue , But, as you can see on the screen, nothing has changed and everything remains the same. Usually, I run into this issue when I first start working with Vue since I don't understand how the component's class renders to the screen. As for us, what we are currently doing is overriding the global class in a local class (component), which is not allowed and hence does not function. Because a child is the component you are overriding, this is. To solve this issue the common approach is using :deep

<style scoped>
:deep(.el-table__row) {
  background-color: red;
}
</style>

We can see the changes taking place when we add this.

As I am going add CSS in to this files.

NewTestTableComponent.vue (final)

<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>
<style scoped>
:deep(.el-table__row) {
  background-color: rgb(51, 134, 79);
  color: aliceblue;
}
:deep(.el-table__body :hover) {
  color: black;
}
</style>

App.vue

<template>
  <div class="container">
    <TableComponent :table-data="tableData" />
    <!-- as for pass props here we are using ':' because we wanted to be dynamic
    props when we are passing on -->
    <el-divider />
    <NewTestTableComponent :table-data="tableData" />
  </div>
</template>

<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
import NewTestTableComponent from './components/NewTestTableComponent.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>
<style>
.container {
  width: 756px;
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
}
</style>

Here is the output of the final polishing

(look cleaner then before)

Conclusion

In conclusion, this article looked at the Vue style system and ways to apply it in daily development work. The best way for front-end developers is to utilize global styling to define a blueprint and local styling for customized use. Nevertheless, this technique has the drawback that front-end developers must submit prototypes to clients by a deadline. Keeping it balance is good thing. Yet, customizability demanded that our front-end developers also have a solid grasp of CSS. So I've added writing about CSS to my bookmarks. I'll speak in-depth about a new component that appears in element plus in the following part (I only selected a few component then I will move on to another framework component).
Here is my full code to this article Git.

Happy coding~~~

Component Series: Element Plus Table part 2

Rax — Thu, 02 Mar 2023 12:52:47 +0000

Introduction
Props
Loop
Tips on using Element Plus table and working with slots
Conclusion

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~~~

Component Series: Element Plus Table part 1

Rax — Tue, 28 Feb 2023 10:33:01 +0000

Introduction
Today Focus
Installation process
- Installation of Nodejs
- Installation of Vue
- Installation of element-plus
Working on component (table)
- Working with folder structure
Conclusion

Introduction

In this series we are going to focus on using a modern frontend framework with component base library to solve our problems as a frontend developer.

Today Focus

Today we are going to install one of the modern frontend framework which is Vue.JS and Element Plus as component base library Element Plus. You can skip ahead to the section where I implement and import the library into Vue if that technology is already installed on your system Installation of element-plus.

Installation process

Installation of Nodejs

Before we go to install Vue.JS we need to install Node JS.
Node.js is a free, open-source server environment that may be used with Windows, Linux, Mac OS, and Unix.

I am going to leave few links for installation step for this different operating system.

Installation of Vue

After successfully install Nodejs you can move to installing Vuejs. By running those commend line.
npm init vue@latest For more explanation, please refer to these official publications Guide quick-start.
Here is my setup after running the commend line.

Installation of element-plus

Element Plus is a UI component base library for Vue 3. To follow the official documentation Element-Plus.
You are required to change directory to your project, and run this commend line. npm install element-plus --save.
After successfully install.

After install element-plus, you are required to import the installation to src/main.js. This step allow Vue and element-plus to recognize one another and enables us to use the component created by element-plus. Here is the code.

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

createApp(App).use(ElementPlus).mount('#app');

Working on component (table)

To run vue locally you can using this commend line.
npm run dev.

What you can see after you visit your locally host. (Mine is http://127.0.0.1:5173/ as default.

Working with folder structure

By best practice we recommend to put component as in components folder that exist in the src directory. Therefore, I am going to create a component name Table, in components/TableComponent.vue.

I am going copy and paste the component code base from the official website Table basic to components/TableComponent.vue.


<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
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>

Even though, you continue to wonder why the website remains unchanged.It is because you have not import the component into the main page. Now I am going to go to src/App.vue to delete all the lines of the code and replace with this instead.

<template>
  <TableComponent />
</template>

<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
</script>

Conclusion

This concludes today's article. In the following one, I'll give you more information about using the table component in element-plus because it can accept props and render with keys and values from the props. You can check out my github for complete code Finish project.

DEV Community: Rax

Component Series: Element Plus Table part 3

Table of Contents

Introduction

Global styling

Local styling

Importing to App.vue

Start working on scoped styling

Conclusion

Component Series: Element Plus Table part 2

Table of Contents

Introduction

Props

Loop

Tips on using Element Plus table and working with slots

Conclusion

Component Series: Element Plus Table part 1

Table of Contents

Introduction

Today Focus

Installation process

Installation of Nodejs

Installation of Vue

Installation of element-plus

Working on component (table)

Working with folder structure

Conclusion