“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”
Hello, 🙎🏻♀️🙋🏻♀ 🙆🏻♀
I love knowledge transfer and am learning to write, ClyingDeng stool!
As participated in the June, August more text activities of the old users, this period how little I have! Hey hey!
This paper mainly carries out a secondary encapsulation for multiple rendering of table item to save the amount of code. Table header and table body data independent, through JS data to control its header display text.
The business requirements
I believe there is a need for this in many business scenarios, especially in the management desk. Each page has one or two tables, but the table style may be different, for example, a page might look like this:
Emmm, if the project is small, you can not consider optimization, write more tables at the worst. In case of large-scale projects, is it inappropriate to have such a table and SFC? If you have 10 tables, the number of lines of code per file associated with the logical operations in each table, along with queries and dialogs, is a large number, and the amount of internal repetition is a very large number!
So, how do you do it with as little code as possible?
The solution
Currently, element-Plus is the base component. Consider only single-table styles, data, in-line operations, and so on (queries, pagination can be encapsulated on this basis). Make its Table component a separate plug-in.
Examples show
The installation
Run the NPM command to install dyingTable.
npm install dyingtable --save
Copy the codeQuick learning
In the entry file main.ts in the vue project:
import { createApp } from 'vue'
import App from './App.vue'
import DyTable from 'dyingtable'
createApp(App).use(DyTable).mount('#app')
Copy the codeNote: The dyingTable plugin is for Vue3! Vue2 version of the package is mixed with other projects, you can also click here to have a look!
The demo implementation
Since there are many demos for table scenarios, head over to DyingTable. Here, we’ll show the first three demos of basic tables, select row tables, and multilevel tables.
Basic form
Take a look at the Element table
For dyingTable, you can pass in the table header you need and the required corresponding column data. The props value in tHeads needs to correspond to the props value in tableData.
Table header label is the name of the binding table header, props is the unique identifier, width is the width of the table column, and align controls the left, middle, and right alignment of the column.
<dy-table :tHeads="tHeads" :tableData="tableData"></dy-table>
<script lang="ts">
import Vue, { defineComponent, reactive } from 'vue'
export default defineComponent({
setup() {
let tHeads = reactive([
{
label: 'date'.props: 'date'.width: '200'.align: 'center',},... ] )let tableData = reactive([
{
date: '2016-05-02'.name: 'Wang Xiaohu'.age: 22.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai,},... ,]),return { tableData, tHeads }
},
})
</script>
Copy the codeThe effect
Select row table
Use Checkbox when selecting multiple rows of data. Add the ref attribute to the table and pass the ref attribute to the table in the component via refs. Add {type: ‘selection’} to the header to display the Checkbox.
<dy-table ref="multiple" :refs="refs" :tHeads="tHeads" :tableData="tableData"></dy-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggles the selected state of the second and third rows</el-button>
<el-button @click="toggleSelection()">deselect</el-button>
</div>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
setup() {
let tHeads = reactive([
{ type: 'selection' },
{
label: 'date'.props: 'date'.width: '200'.sortable: false.align: 'center'.className: 'stripa'./ / column style},])let tableData = reactive([
{
date: '2016-05-02'.name: 'Wang Xiaohu'.age: 22.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai}, {date: '2016-04-04'.name: 'Wang Xiaohu'.age: 12.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai,},... ] )let multiple: any = ref(null)
let refs = ref('multipleTable')
let toggleSelection = (rows: any) = > {
let ref = multiple.value.$refs
if (rows) {
rows.forEach((row: any) = > {
ref.multipleTable.toggleRowSelection(row)
})
} else {
ref.multipleTable.clearSelection()
}
}
return { tableData, tHeads, multiple, refs, toggleSelection }
},
})
</script>
Copy the codeThe effect
Multistage header
When the data structure is complex, multi-level table headers can be used to show the hierarchical relationship of the data. Use the Children property of tHeads to render the child table header. To display column data, you must bind props.
<dy-table :tableData="tableData" :tHeads="tHeads"></dy-table>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup() {
let tHeads = reactive([
{
label: 'date'.props: 'date'.width: '200'.sortable: false.align: 'center'}, {label: 'Shipping Information'.children: [{label: 'name'.props: 'name'.width: '200'.sortable: false.align: 'center'}, {label: 'address'.sortable: false.align: 'left'.children: [{label: 'province'.props: 'province'.width: '150',}... ] ,},],},])let tableData = reactive([
{
date: '2016-05-03'.name: 'Wang Xiaohu'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333,}])return { tableData, tHeads }
},
})
</script>
Copy the code
The effect
A rollup on pit
Here, TOO, I’m a bit of a jerk. Table encapsulation was originally implemented with Element-UI and VUe2. If you’re thinking about vue3 now, try vue3 and Element-Plus. Finished writing, and want to carry this component out separately, make a plug-in play. Well, the vue-CLI plugin worked. Thinking about not rollup again, well, try to try, stepped in a big mud…
Look at the official website document, emMM, like a god’s book 🪁🪁🪁 this learning method, I used the rollup package before the project configuration, the most basic to compile TS file required configuration first set up.
Because I use Vue3, element-Plus to encapsulate my own components. So you must install and configure plug-ins that parse vue files and element-Plus. Install the required dependencies in the next section of code:
import Components from 'unplugin-vue-components/rollup'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from 'rollup-plugin-vue'
export default {
plugins: [
vue({
compileTemplate: true,
}),
Components({
resolvers: [ElementPlusResolver()],
})
]
}
Copy the codeYou think that the installation is good, can run normally, that you can be too naive 🎃
321, come! BUG:
Excuse me, what’s the problem?
Exported by [module] Error: “[name] is not exported by [module]”.
Do you know about this?
Encounter this problem at that time I Baidu can not its solution, see only a little relevant problem, actually is this. Dude, THEY just solved it with Vite… 🙃 🙂 🙃
You want to know how I solved it?
NPM I rollup-plugin-vue NPM I rollup-plugin-vue 🎊 rollup-plugin-vue NPM I rollup-plugin-vue I then uninstalled the dependency, re-installed it, and installed it with a -d. And then, it’s done. I also very speechless 😶
NPM release step pit
NPM release issues are mainly TLS upgrade issues.
As of 4 October 2021, all connections to the NPM website and the NPM registry (including package installations) must use TLS 1.2 or higher.Click to view and upgrade the TLS version.In addition to TLS, update NPM to version 7 or later.
Look at your own version of NPM:
NPM versions are usually updated more frequently than Node versions. Emmm, then the next latest version of NPM:
npm install npm@latest -g
Copy the codeIn addition, you need to set the NPM registry to HTTPS endpoints as shown below:
As for logging in to the NPM account for NPM release, I did not encounter too much problem, so I will not repeat too much here.
About the DyingTable plugin
-
Dyingtable project address: github.com/ClyingDeng/…
-
According to vue2 + element-UI, the details of the secondary encapsulation of the table can be seen: formdemo
-
Project address: github.com/ClyingDeng/…