How to encapsulate the table component of Vue Element

How to encapsulate the table component of Vue Element

When encapsulating Vue components, I will still use functional components in a cross-functional way. Regarding functional components, we can think of it as a function in a component, the input parameter is the render context, and the return value is the rendered HTML (VNode). It is more suitable for situations where the outer component is just a logical encapsulation of the inner component, and the rendered template structure does not change or expand much, and it must be stateless and instanceless. Stateless means that it does not have Vue lifecycle functions such as created, mounted, and updated. Instanceless means that it has no responsive data and this context.

Let's start with a simple example of a Vue functional component, and then follow this example to introduce it in detail.

export default {
 functional: true,
 props: {},
 render(createElement, context) {
   return createElement('span', 'hello world')
 }
}

Vue provides a functional switch. When set to true, the component can be turned into a stateless, instance-free functional component. Because it is just a function, the rendering overhead is relatively small.

The Render function in the functional component provides two parameters, createElement and context. Let's first understand the first parameter, createElement.

To put it simply, createElement is used to create a virtual DOM node VNode. It receives three parameters. The first parameter can be a DOM node string, a Vue component, or a function that returns a string or a Vue component. The second parameter is an object, which is optional and defines the parameters required to render the component. The third parameter is a child virtual node, which can be a component created by the createElement function, a normal string such as 'hello world', an array, or a function that returns a string or a Vue component.

There are a few things to note about createElement:

  • If the first parameter of createElement is a component, the third parameter can be omitted, and it will be invalid even if it is written;
  • The render function can listen to the events emitted by the component $emit in the on event
  • In versions prior to 2.3.0, if a functional component wanted to receive props, the props option was required. In version 2.3.0 and above, you can omit the props option and all attributes on the component will be automatically and implicitly resolved as props.

The second parameter of Render in functional components is the context. Data, props, slots, children, and parent can all be accessed through the context.

In versions 2.5.0 and above, if you use single-file components, template-based functional components can be declared like this: <template functional></template>, but if the render function in the Vue component exists, the Vue constructor will not compile the rendering function from the HTML template extracted from the template option or the mounting element specified by the el option, that is, the templete and render functions cannot coexist in a component. If a component has a templete, even if there is a render function, the render function will not be executed because the template option has a higher priority than the render option.

At this point, the introduction to Vue functional components is almost complete. Let's take a look at how Element's table component is encapsulated through functional components.

Effect picture:

1. Encapsulated table component:

<template>
 <div>
  <el-table :data="cfg.data" style="width: 100%" v-on="cfg.on" v-bind="attrs" v-loading="loading">
   <el-table-column v-if="cfg.hasCheckbox" v-bind="selectionAttrs" type="selection" width="55" label="xx" />
   <el-table-column v-for="n in cfg.headers" :prop="n.prop" :label="n.label" :key="n.prop" v-bind="{...columnAttrs, ...n.attrs}">
    <template slot-scope="{row}">
     <slot :name="n.prop" :row="row"><Cell :config="n" :data="row" /></slot>
    </template>
   </el-table-column>
  </el-table>
  <el-pagination
   class="pagination"
   v-if="showPage"
   layout="total, sizes, prev, pager, next, jumper"
   :page-sizes="[2, 3, 6, 11]"
   :page-size="page.size"
   :total="page.total"
   :current-page="page.page"
   @current-change="loadPage"
   @size-change="sizeChange"
  />
 </div>
</template>

<script>
import Cell from './cell'

export default {
 components:
  Cell,
 },
 props: {
  config: Object,
 },
 data(){
  return {
   loading: true,
   columnAttrs: {
    align: 'left',
    resizable: false,
   },
   cfg: {
    on: this.getTableEvents(),
    attrs: {
     border: true,
		   stripe: true,
    },
    data: [],
    ...this.config,
   },
   page: {
    size: this.config.size || 10,
    page: 1,
    total: 0,
   },
   checked: [],
  }
 },
 created(){
  this.load();
 },
 computed: {
  selectionAttrs(){
   let {selectable, reserveSelection = false} = this.config || {}, obj = {};
   // Can the checkBox be selected if(selectable && typeof selectable == 'function'){
    Object.assign(obj, {
     selectable,
    })
   }
   //reserve-selection is only valid for columns with type=selection. The type is Boolean. If true, the previously selected data will be retained after the data is updated (row-key must be specified)
   if(reserveSelection){
    Object.assign(obj, {
     'reserve-selection': reserveSelection,
    })
   }

   return obj;
  },
  attrs(){
   let {config: {spanMethod, rowKey}, cfg: {attrs}} = this;
   // Merge cells - spanMethod is the method of merging cells passed from the parent component, please refer to element merge cells if (spanMethod && typeof spanMethod == 'function') {
    Object.assign(attrs, {
     'span-method': spanMethod,
    })
   }
   // To select across pages of a table, you need to set row-key and reserve-selection. reserve-selection can only and must be set on el-table-column whose type is selection if(rowKey && typeof rowKey == 'function'){
    Object.assign(attrs, {
     'row-key': rowKey,
    })
   }

   return attrs;
  },
  showPage(){
   let {size, total} = this.page;
   return size < total;
  },
 },
 methods: {
  getTableEvents(){
   let {hasCheckbox = false} = this.config || {}, events = {}, _this = this;
   if(hasCheckbox){
    // Bind event Object.assign(events, {
     'selection-change'(v){
     	_this.checked = v;
     },
    });
   }

   return events;
  },
  // Get the checked row getChecked(){
   return this.checked;
  },
  // Request data load(p = {}){
   let { size, page } = this.page, {loadData = () => Promise.resolve({})} = this.config;
   this.loading = true;
   // The parameters of loadData here are only page and size required for paging during initialization. As for other parameters required by the interface, they are passed in the parent component's loadData loadData({...p, page, size}).then(({data, total}) => {
    this.cfg.data = data;
    this.page.page = page;
    this.page.total = total;
    this.loading = false;
   });
  },
  loadPage(index){
   this.page.page = index
   this.load();
  },
  sizeChange(size){
   this.page.size = size
   this.load();
  },
  // Generally, this method can be called when clicking the query button or partially refreshing the table list. If no parameters are passed, reload from the first page by default (p = {}) {
   this.page.page = 1
   this.load(p);
  },
 },
}
</script>

2. Cell.js for each column of the summary table:

import * as Components from './components';
let empty = '-'
export default {
 props: {
  config: Object,
  data: Object,
 },
 functional: true,
 render: (h, c) => {
  let {props: {config = {}, data = {}}} = c, {prop, type = 'Default'} = config, value = data[prop] || config.value, isEmpty = value === '' || value === undefined;
  return isEmpty ? h(Components.Default, {props: {value: empty}}) : h(Components[type], {props: {value, empty, data, ...config}});
 }
}

3. This encapsulation separates the rendering of each column into multiple vue components, and finally merges them into a components.js file for matching.

1) Integrate the file components.js:

import Date from './Date';
import Default from './Default';
import Currency from './Currency';
import Enum from './Enum';
import Action from './Action';
import Link from './Link';
import Format from './Format';
import Popover from './Popover';

export {
 Default,
 Date,
 Currency,
 Enum,
 Action,
 Link,
 Format,
 Popover,
}

2) Date column Date.vue

<template functional>
  <span>{{props.value | date(props.format)}}</span>
</template>

3) Default column Default.vue

<template functional>
  <span>{{props.value}}</span>
</template>

4) Thousandths of the amount in Currency.vue

<template functional>
  <span>{{props.value | currency}}</span>
</template>

5) Mapping columns Enum.js

let mapIdAndKey = list => list.reduce((c, i) => ({...c, [i.key]: i}), {});

let STATUS = {
  order: mapIdAndKey([
    {
      id: 'draft',
      key: 'CREATED',
      val: 'Not submitted',
    },
    {
      id: 'pending',
      key: 'IN_APPROVAL',
      val: 'Under review',
    },
    {
      id: 'reject',
      key: 'REJECT',
      val: 'Approval rejected',
    },
    {
      id: 'refuse',
      key: 'REFUSE',
      val: 'Approval rejected',
    },
    {
      id: 'sign',
      key: 'CONTRACT_IN_SIGN',
      val: 'Contract signing',
    },
    {
      id: 'signDone',
      key: 'CONTRACT_SIGNED',
      val: 'Contract signed successfully',
    },
    {
      id: 'lendDone',
      key: 'LENDED',
      val: 'Loan successful',
    },
    {
      id: 'lendReject',
      key: 'LOAN_REJECT',
      val: 'Loan rejection',
    },
    {
      id: 'cancel',
      key: 'CANCEL',
      val: 'Cancel successfully',
    },
    {
      id: 'inLend',
      key: 'IN_LOAN',
      val: 'Loan approval in progress',
    },
  ]),
  monitor:mapIdAndKey([
    {
      key: '00',
      val: 'Not monitored',
    },
    {
      key: '01',
      val: 'Monitoring',
    },
  ]),
}

export default {
  functional: true,
  render(h, {props: {value, Enum, empty}, parent}){
    let enums = Object.assign({}, STATUS, parent.$store.getters.dictionary),
      {name = '', getVal = (values, v) => values[v]} = Enum, _value = getVal(enums[name], value);
      
    if( _value === undefined) return h('span', _value === undefined ? empty : _value);

    let {id, val} = _value;
    return h('span', {staticClass: id}, [h('span', val)]);
  }
}

6) Action.js

const getAcitons = (h, value, data) => {
 let result = value.filter(n => {
  let {filter = () => true} = n;
  return filter.call(n, data);
 });

 return result.map(a => h('span', {class: 'btn', on: {click: () => a.click(data)}, key: a.prop}, a.label))
}

export default {
 functional: true,
 render: (h, {props: {value, data}}) => {
  return h('div', {class: 'action'}, getAcitons(h, value, data))
 },
}

7) Column Link.vue with jumpable links

<template>
 <router-link :to="{ path, query: params }">{{value}}</router-link>
</template>

<script>
export default {
 props: {
  data: Object,
  value: String,
  query: {
   type: Function,
   default: () => {
    return {
     path: '',
     payload: {}
    }
   }
  },
 },
 computed: {
  //Route path
  path(){
   const { path } = this.query(this.data)
   return path
  },
  params(){
   const { payload } = this.query(this.data)
   return payload
  },
 },
}
</script>

8) Customize the data format you want to display Format.vue

<template functional>
 <div v-html="props.format(props.value, props.data)" />
</template>

9) When there is too much content, it needs to be omitted and a prompt window pops up after the mouse moves in to display the column Popover.vue of all the content

<template functional>
 <el-popover
  placement="top-start"
  width="300"
  trigger="hover"
  popper-class="popover"
  :content="props.value">
  <span slot="reference" class="popover-txt">{{props.value}}</span>
 </el-popover>
</template>
<style scoped>
.popover-txt{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 display: block;
 cursor: pointer;
}
</style>

As you can see from the above code, I used both functional components based on the render function type and functional components based on templates. This is mainly for the convenience of encapsulation. After all, using render, the function closest to the compiler, is a bit troublesome and not as convenient as functional components based on templates.

4. Use the encapsulated table component

1) Not using slots:

<template>
 <div style="margin: 20px;">
  <el-button type="primary" v-if="excelExport" @click="download">Get the selected table data</el-button>
  <Table :config="config" ref="table" />
 </div>
</template>

<script>
import Table from '@/components/table'

export default {
 components:
  Table,
 },
 data() {
  return {
   config: {
    headers: [
     {prop: 'contractCode', label: 'Business number', attrs: {width: 200, align: 'center'}},
     {prop: 'payeeAcctName', label: 'Payee Account Name', type: 'Link', query: row => this.query(row), attrs: {width: 260, align: 'right'}},
     {prop: 'tradeAmt', label: 'Payment amount', type: 'Currency'},
     {prop: 'status', label: 'Operation status', type: 'Enum', Enum: {name: 'order'}},
     {prop: 'statistic', label: 'Warning Statistics', type: 'Format', format: val => this.format(val)}, //Customize the data format you want to display {prop: 'reason', label: 'Reason', type: 'Popover'},
     {prop: 'payTime', label: 'Payment time', type: "Date", format: 'yyyy-MM-dd hh:mm:ss'}, //If format is not set, the default date format is yyyy/MM/dd
     {prop: 'monitorStatus', label: 'Current monitoring status', type: 'Enum', Enum: {name: 'monitor'}},
    ].concat(this.getActions()),
    //Get list data through the interface - the parameter p here is the paging parameter passed by the child component loadData: p => request.post('permission/list', {...this.setParams(), ...p}),
    hasCheckbox: true,
    selectable: this.selectable,
    reserveSelection: false,
    rowKey: row => row.id,
   },
   status: "01",
   permission: ["handle", "pass", "refuse", "reApply", 'export']
  }
 },
 computed: {
  handle() {
   return this.permission.some(n => n == "handle");
  },
  pass() {
   return this.permission.some(n => n == "pass");
  },
  reject() {
   return this.permission.some(n => n == "reject");
  },
  refuse() {
   return this.permission.some(n => n == "refuse");
  },
  excelExport(){
   return this.permission.some(n => n == "handle") && this.permission.some(n => n == "export");
  },
 },
 methods: {
  getActions(){
   return {prop: 'action', name: 'Operation', type: "Action", value: [
    {label: "View", click: data => {console.log(data)}},
    {label: "Handling", click: data => {}, filter: ({status}) => status == 'CREATED' && this.handle},
    {label: "Pass", click: data => {}, filter: ({status}) => status == 'PASS' && this.pass},
    {label: "Reject", click: data => {}, filter: ({status}) => status == 'REJECT' && this.reject},
    {label: "Reject", click: data => {}, filter: ({status}) => status == 'CREATED' && this.refuse},
   ]}
  },
  setParams(){
   return {
    name: 'Test',
    status: '01',
    type: 'CREATED',
   }
  },
  query(row){
   return {
    path: '/otherElTable', // route path
    payload: {
     id: row.id,
     type: 'link'
    }
   }
  },
  format(val){
   let str = '';
   val.forEach(t => {
    str += '<span style="margin-right:5px;">' + t.total + '</span>';
   })
   return str;
  },
  selectable({status}){
   return status == "REFUSE" ? false : true
  },
  download(){
   console.log(this.$refs.table.getChecked())
  },
 },
};
</script>
<style>
.action span{margin-right:10px;color:#359C67;cursor: pointer;}
</style>

2) Using slots:

 <Table :config="config" ref="table">
  <template #statistic="{row}">
   <div v-html="loop(row.statistic)"></div>
  </template>
  <template #payeeAcctName="{row}">
   {{row.payeeAcctName}}
  </template>
  <template #tradeAmt="{row}">
   {{row.tradeAmt | currency}}
  </template>
  <template v-slot:reason="{row}">
   <template v-if="!row.reason">-</template>
   <el-popover
    v-else
    placement="top-start"
    width="300"
    trigger="hover"
    popper-class="popover"
    :content="row.reason">
    <span slot="reference" class="popover-txt">{{row.reason}}</span>
   </el-popover>
  </template>
  <template #payTime="{row}">
   {{row.payTime | date('yyyy-MM-dd hh:mm:ss')}}
  </template>
  <template #customize="{row}">
   {{customize(row.customize)}}
  </template>
  <template #opt="{row}">
   <div class="action">
    <span>View</span>
    <span v-if="row.status == 'CREATED' && handle">Handle</span>
    <span v-if="row.status == 'PASS' && pass">Pass</span>
    <span v-if="row.status == 'REJECT' && reject">Reject</span>
    <span v-if="row.status == 'REFUSE' && refuse">Reject</span>
   </div>
  </template>
 </Table>

<script>
import Table from '@/components/table'

export default {
 components:
  Table,
 },
 data(){
  return {
   config: {
    headers: [
     {prop: 'contractCode', label: 'Business number', attrs: {width: 200, align: 'center'}},
     {prop: 'payeeAcctName', label: 'Receiving account name', attrs: {width: 260, align: 'right'}},
     {prop: 'tradeAmt', label: 'Payment amount'},
     {prop: 'status', label: 'Operation status', type: 'Enum', Enum: {name: 'order'}},
     {prop: 'statistic', label: 'Early warning statistics'},
     {prop: 'payTime', label: 'Payment time'},
     {prop: 'reason', label: 'reason'},
     {prop: 'monitorStatus', label: 'Current monitoring status', type: 'Enum', Enum: {name: 'monitor'}},
     {prop: 'customize', label: 'Customize display', type: 'Format', format: val => this.customize(val)},
     {prop: 'opt', label: 'Operation'},
    ],
    loadData: () => Promise.resolve({
     data: [
      {id: 1, contractCode: '', payeeAcctName: 'Bank of China Shanghai Branch', tradeAmt: '503869.265', status: '00', payTime: 1593585652530,
       statistic:[
        {level: 3, total: 5},
        {level: 2, total: 7},
        {level: 1, total: 20},
        {level: 0, total: 0}
       ],
       customize: ['China', 'Shanghai', 'Pudong New Area']
      },
      {id: 2, contractCode: 'GLP-YG-B3-1111', payeeAcctName: 'China Post Shanghai Branch', tradeAmt: '78956.85', status: 'CREATED', payTime: 1593416718317, 
       reason: 'Popover's properties are very similar to Tooltip's. They are both developed based on Vue-popper. Therefore, for repeated properties, please refer to Tooltip's documentation. This document will not explain them in detail. ',
      },
      {id: 3, contractCode: 'HT1592985730310', payeeAcctName: 'China Merchants Bank Shanghai Branch', tradeAmt: '963587123', status: 'PASS', payTime: 1593420950772, monitorStatus: '01'},
      {id: 4, contractCode: 'pi239', payeeAcctName: 'Guangzhou Logistics Co., Ltd.', tradeAmt: '875123966', status: 'REJECT', payTime: 1593496609363},
      {id: 5, contractCode: '0701001', payeeAcctName: 'Construction Bank Shanghai Branch', tradeAmt: '125879125', status: 'REFUSE', payTime: 1593585489177},
     ],
    }),
   },
   permission: ["handle", "pass", "refuse", "reApply", 'export'],
  }
 },
 computed: {
  handle() {
   return this.permission.some(n => n == "handle");
  },
  pass() {
   return this.permission.some(n => n == "pass");
  },
  reject() {
   return this.permission.some(n => n == "reject");
  },
  refuse() {
   return this.permission.some(n => n == "refuse");
  },
  excelExport(){
   return this.permission.some(n => n == "handle") && this.permission.some(n => n == "export");
  },
 },
 methods: {
  query(row){
   return {
    path: '/otherElTable', // route path
    payload: {
     id: row.id,
     type: 'link'
    }
   }
  },
  loop(val){
   if(!val) return '-'
   let str = '';
   val.forEach(t => {
    str += '<span style="margin-right:5px;">' + t.total + '</span>';
   })
   return str;
  },
  customize(v){
   return v ? v[0] + v[1] + v[2] : '-'
  }
 }
}
</script>

There are two different usages, the first one is not based on slots, and the second one is based on slots. By comparing the two methods, we can see that in the second method, for any column that uses slots, the type field is no longer defined in the headers array. Even if the type is defined, it does not work. The slot is what works. Moreover, concat is no longer used to splice an operation column. The operation column is also rendered through slots. However, if many columns are implemented in the form of slots, I think the page will not look so neat.

One more thing, since we have encapsulated the implementation of most scenarios, there is no need to use slots when using them, just try to keep the page clean. If you really feel that concat an operation list after the headers array is a bit awkward, then just implement the operation list in the form of a slot. The slot implementations mentioned in this blog are just to give you more options.

Finally, regarding the implementation of the thousandths of the amount and the timestamp formatting, I will not post the code here, you can implement it yourself.

Recently, I thought about the encapsulated table component again, and wondered if there are other implementation methods based on the original encapsulation. For example, I don’t want to concat an operation column after the originally defined headers array, or the data processing method of a certain column of the table is not included in the methods we encapsulated before, or as a front-end developer who uses this table component for the first time, I am not used to your way of writing. Can I write some processing methods myself based on your encapsulation? The answer is yes. Of course, we say that since the component has been encapsulated, everyone follows a routine, which saves time and effort. Why not do it? But to be honest, if we look at it from the perspective of learning and the idea that it is better to have many skills, then learning more, thinking more and doing more will always be beneficial to our progress. It’s just that in the actual development process, we should try our best to choose a packaging method, and then everyone should abide by this agreement.

In fact, after saying so much nonsense, this change is not very significant. It just adds slots based on the original package. If you have read this blog, you must remember that there is a section of code in my encapsulated code that is specifically used to process each column of data:
<Cell :config="n" :data="row" />
Yes, that's it. I don't want to say more about it, as I have already introduced it above. In this change, we mainly use slots.

The slot API has been explained very clearly on VUE's official website and various articles on the Internet. It can be roughly divided into: default slots (some people also call them anonymous slots), named slots, and scoped slots. For their introduction, please refer to the official website or various articles on the Internet. This change mainly uses named slots and scoped slots. Named slots, as the name implies, are slots with names. The names of the slots we use in this encapsulation come from the props of each column of the table. The main role of the scope slot in this encapsulation is to pass values ​​to the parent component through the slot of the child component. Its implementation is somewhat similar to the Vue parent component passing values ​​to the child component, except that the two receive values ​​in different ways. All in all, this change is very simple to implement. Just wrap another layer of named slots around <Cell :config="n" :data="row" /> .
<slot :name="n.prop" :row="row"><Cell :config="n" :data="row" /></slot>
That's it.

Next, we can answer the questions we raised above. Let’s see the answer:

<Table :config="config" ref="table">
  <template #payTime="{row}">
   {{row.payTime | date('yyyy-MM-dd hh:mm:ss')}}
  </template>
  <template #customize="{row}">
   {{customize(row.customize)}}
  </template>
  <template #opt="{row}">
   <div class="action">
    <span>View</span>
    <span v-if="row.status == 'CREATED' && handle">Handle</span>
    <span v-if="row.status == 'PASS' && pass">Pass</span>
    <span v-if="row.status == 'REJECT' && reject">Reject</span>
    <span v-if="row.status == 'REFUSE' && refuse">Reject</span>
   </div>
  </template>
</Table>

The above is for some special cases, and if you don’t want to use the methods I encapsulated at the beginning, then yes, I will provide you with another "special service". Please note that if you use slots to render the data yourself, then in the headers array, you need to provide the rendering of the table header without adding the type field.
For example, when we first rendered the date column of the table, we wrote:
{prop: 'payTime', label: '付款時間', type: "Date", format: 'yyyy-MM-dd hh:mm:ss'}
So if you use slots to render the data yourself, the writing here becomes like this:
{prop: 'payTime', label: '付款時間'}
Also, we previously defined the operation column by concatting an array after the headers array. If you use slots to render the data yourself, you don’t need to concat an array again. Instead, just add {prop: 'opt', label: '操作'} to the headers array.

In fact, this change means that a layer of slots is repackaged on the original basis. So for those situations where we don’t need to process the data ourselves and just need to directly display the data returned by the interface, we don’t need to do any special processing when using this encapsulated table component, and we don’t need to define it like the slots above. We just need to define it normally in the headers array as before. Because of the slot, if you don't define a named slot or a default slot, then what is displayed in the slot is <Cell :config="n" :data="row" /> wrapped in the slot tag slot.
Got it?

One more thing, if you say that you don't want to use slots to process columns such as date and amount thousandths, then you can still follow the principle of slots I introduced above and define it in the headers array as follows:

{prop: 'tradeAmt', label: 'Payment amount', type: 'Currency'},
{prop: 'payTime', label: 'Payment time', type: "Date"},

Having written this, what I actually want to say is that even if slots are added, it will have basically no impact on the previous usage methods. You can still use them as you wish. I just provide you with more options.

If you really don't want to use slots and want to keep the page clean, it doesn't matter whether you wrap the <Cell :config="n" :data="row" /> code with a slot or not. You can just use the first method I introduced above.

Author: Xiaohuai

Source: http://tnnyang.cnblogs.com

The above is the details of how to encapsulate the table component of Vue Element. For more information about encapsulating the table component of Vue Element, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Use of Vue3 table component
  • Detailed example of encapsulating the table component of Vue Element
  • vxe-table vue table table component function
  • Vue.js implements a sortable table component function example
  • Detailed example of implementing a simple table component in Vue
  • Vue fixed header fixed column click table header sortable table component
  • Detailed example of developing Vue.js table component
  • Vue+elementui realizes multiple selection and search functions of drop-down table
  • The table in vue+Element is editable (select drop-down box)
  • Vue implements drop-down table component

<<:  MySQL 5.7.13 installation and configuration method graphic tutorial on Mac

>>:  Detailed explanation of MySQL database transaction isolation levels

Recommend

What does the "a" in rgba mean? CSS RGBA Color Guide

RGBA is a CSS color that can set color value and ...

Basic structure of HTML documents (basic knowledge of making web pages)

HTML operation principle: 1. Local operation: ope...

How to install Composer in Linux

1. Download the installation script - composer-se...

Tutorial on using $attrs and $listeners in Vue

Table of contents introduce Example Summarize int...

Details after setting the iframe's src to about:blank

After setting the iframe's src to 'about:b...

MySQL 8.0.15 installation and configuration tutorial under Win10

What I have been learning recently involves knowl...

Three ways to avoid duplicate insertion of data in MySql

Preface In the case of primary key conflict or un...

Linux (center OS7) installs JDK, tomcat, mysql to build a java web project running environment

1. Install JDK 1. Uninstall the old version or th...

Metadata Extraction Example Analysis of MySQL and Oracle

Table of contents Preface What is metadata Refere...

Solution to MySql Error 1698 (28000)

1. Problem description: MysqlERROR1698 (28000) so...

MySQL slow query: Enable slow query

1. What is the use of slow query? It can record a...

HTML line spacing setting methods and problems

To set the line spacing of <p></p>, us...

JavaScript implements large file upload processing

Many times when we process file uploads, such as ...

Let’s talk in detail about how JavaScript affects DOM tree construction

Table of contents Document Object Model (DOM) DOM...

JavaScript implementation of carousel example

This article shares the specific code for JavaScr...