el-table【el-table-column】 ：普通列 / 自定义列---封装el-table组件

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

参考链接：

参考链接1：# element-ui中的 table 组件在vue中的使用

参考链接2：可能会遇到的报错问题，自定义列component报错不展示问题

1.基础的table表

点击查看element el-table 官网链接

html

js

2.列表基本一致的情况下，可以循环生成el-table-column

想要增加表头时直接在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: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' }
    ]
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  }
}
</script>

3. 当有个别列为特殊列即需要自定义内容列时，基本用法solt

<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed="right" label="操作" width="100">
         <template slot-scope="scope">
           <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> 
           <el-button type="text" size="small">编辑</el-button> 
         </template> 
       </el-table-column>
    </el-table>
  </template>

4.当普通列和自定列一起作为组件使用时

涉及到的知识点：

slot 插槽用法

→ vue slot 官网解释

→ 其他作者的slot解释

component 自定义组件用法

→ 详细的component解释

封装的组件

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

v-if ：调用组件，在组件标签内加el-table-column 通过slot定位到组件内的slot名 对应的位置处

v-else-if：单独定义el-table-column为一个特殊组件放入component中

v-else：普通的列

调用封装好的组件：普通列、自定义列

<template>
  <my-table
    :data="tableData"
    :col-configs="colConfigs">
    <!-- slot="opt" 不能省略，需要与下面配置项中的对应 -->
    <el-table-column slot="opt">
      <el-button size="mini" slot-scope="{ row }">查看</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: '变化' component: PrefixPlusText },
      { prop: 'name', label: '趋势', component: PrefixPlusText },
       // 模版中的元素需要对应的有 slot="opt" 属性
      { slot: 'opt' }
    ]
    return {
      tableData: [{
        change: '12%',
        trend: '10%
      }, {
        change: '-12%',
        trend: '-10%'
      }]
    }
  }
}
</script>