“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

Reference links:

Reference link 1: # Element – Use of the TABLE component in UI in VUE

Link 2: Error problems that may be encountered, custom component columns do not display errors

1. Basic table

Click on the link to Element El-Table’s website

html

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

js

<script>
export default { 
    methods: { 
        handleClick(row) { console.log(row); }},data() { 
        return { 
            tableData: [{date: '2016-05-02'.name: 'Wang Xiaohu'.province: 'Shanghai'.city: 'Putuo District'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.zip: 200333 }
            ]
        } 
    } 
} 
</script>
Copy the code

2. If the list is almost the same, you can generate an el-table-column in a loop

If you want to add headers, add them to this. ColConfigs

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="{ prop, label } in colConfigs"
      :key="prop"
      :prop="prop"
      :label="label">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    this.colConfigs = [
      { prop: 'date'.label: 'date' },
      { prop: 'name'.label: 'name' },
      { prop: 'address'.label: 'address'}]return {
      tableData: [{
        date: '2016-05-02'.name: 'Wang Xiaohu'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai
      }, {
        date: '2016-05-04'.name: 'Wang Xiaohu'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai}}}}]</script>
Copy the code

3. Solt is basically used when there are individual columns and special columns that require custom content columns

<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="right" label="Operation" width="100">
         <template slot-scope="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">To view</el-button> 
           <el-button type="text" size="small">The editor</el-button> 
         </template> 
       </el-table-column>
    </el-table>
  </template>
Copy the code

4. When normal columns and custom columns are used together as components

Knowledge points involved:

Slot Usage

→ Vue Slot official website

→ Slot explanation by other authors

Component Customizes component usage

→ Detailed Component explanation

Encapsulated components

// my-table.vue
<template>
  <el-table :data="data">
    <template v-for="colConfig in colConfigs">
      <slot v-if="colConfig.slot" :name="colConfig.slot">
      <component
        v-else-if="colConfig.component"
        :is="config.component" 
        :col-config="colConfig">
      </component>
      <el-table-column v-else v-bind="colConfig"></el-table-column>
    </template>  
  </el-table>
</template>

<script>
export default {
  props: ['colConfigs'.'data']}</script>
Copy the code

V-if: invokes the component and adds el-table-column to the component label to locate it to the slot name in the component

V-else -if: Defines the el-table-column separately as a special component in the Component

V-else: Plain column

Invoke wrapped components: normal columns, custom columns

<template>
  <my-table
    :data="tableData"
    :col-configs="colConfigs">
    <! -- slot="opt" -->
    <el-table-column slot="opt">
      <el-button size="mini" slot-scope="{ row }">To view</el-button>
    </el-table-column>
  </my-table>
</template>
<script>

const PrefixPlusText = {
  props: ['colConfig'],
  template: `
    <el-table-column :label="colConfig.label">
      <span :slot-scope="{ row }">
        {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}
      </span>
    </el-table-column>'} export default {data () {this.colConfigs = [{prop: 'change', label: 'change' Component: PrefixPlusText}, {prop: 'name', label: 'trend ', Component: PrefixPlusText}, // elements in the template need to have the corresponding slot="opt" {slot: 'opt'}] return {tableData: [{ change: '12%', trend: '10% }, { change: '-12%', trend: '-10%' }] } } }</script>
Copy the code