脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE element-ui 复用Table组件

VUE element-ui 写个复用Table组件的示例代码

 更新时间：2017年11月18日 15:35:10   作者：Shyla  
本篇文章主要介绍了VUE element-ui 写个复用Table组件的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。

项目中表格较多，所以复用性最重要

步骤一

先来个基本的表格展示

官例的tableData

tableData: [{
 date: '2016-05-02',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1518 弄'
}, {
 date: '2016-05-04',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1517 弄'
}, {
 date: '2016-05-01',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1519 弄'
}, {
 date: '2016-05-03',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1516 弄'
}]

table.vue

<template>
 <el-table :data="tableData" border>
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
 </el-table>
</template>

步骤二

简化一下表格：

//table.vue
<template>
 <el-table :data="tableData" border>
  <el-table-column v-for="(item,key) in tableKey" 
  :key="key"
  :prop="item.value"
  :label="item.name"></el-table-column>
 </el-table>
</template>
<script>
export default{
 name: 'table',
 data(){
  return{
   tableData:[...],
   tableKey: [{
    name: 'date',
    value: '日期'
   },{
    name: '姓名',
    value: 'name'
   },{
    name: '地址',
    value: 'address'
   }]
  }
 }
}
</script>

步骤三

复用table.vue就是————给它数据的同时告诉它我的字段名呗

新建一个父组件sl_table.vue

//sl_table.vue
<template>
 <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
import Table from '@/components/table'
export default{
 name: 'sl-table',
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: 'date',
    value: '日期'
   },{
    name: '姓名',
    value: 'name'
   },{
    name: '地址',
    value: 'address'
   }]
  }
 },
 components: {
  'sl-table': Table
 }
}
</script>

table.vue就更简单了

//table.vue
<template>
 <el-table :data="tableData" border>
  <el-table-column v-for="(item,key) in tableKey" 
  :key="key"
  :prop="item.value"
  :label="item.name"></el-table-column>
 </el-table>
</template>
<script>
export default{
 name: 'table',
 data(){
  return{
   
  }
 },
 props:['tableData','tableKey'],
}
</script>

步骤四

可以根据需求修改table的形式

列宽度

这个较为简单，可以直接加个属性

//sl_table.vue
...
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: 'date',
    value: '日期',
    width: 80
   },{
    name: '姓名',
    value: 'name',
    width: 80
   },{
    name: '地址',
    value: 'address'
   }]
  }
 },
...

table.vue

//table.vue
...
<el-table-column v-for="(item,key) in tableKey" 
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>
...

自定义模板列

如果我们需要告诉组件哪个是自定义的列，所以添加一个属性operate

table.vue

<el-table-column v-for="(item,key) in tableKey" 
v-if="!item.operate"
:key="key"
:prop="item.value"
:label="item.name"
:width="item.width"></el-table-column>

<!-- 自定义 -->
<el-table-column v-else>
 <template scope="scope">
  <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot>
 </template>
</el-table-column>
//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey">
 <template slot="date" scope="scope">
  <span>{{ scope.row.date | DateFilter }}</span>
 </template>
</sl-table>
...
  data(){
   return {
    tableData: [...]
    tableKey: [{
     name: 'date',
     value: '日期',
     operate: true
    },{
     name: '姓名',
     value: 'name',
     operate: false
    },{
     name: '地址',
     value: 'address',
     operate: false
    }]
   }
  },
  filters: {
   DateFilter(){...}
  }
...

表格展开行

类似宽度，只要sl_table.vue传入一个isExpand的属性。这里加个每次只能展开一行的效果：

//sl_table.vue

<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
 <template slot="expand" scope="scope">
  {{...expand something}}
 </template>
 ...
</sl-table>

table.vue

//table.vue
<el-table :data="tableData" border @expand="handleExpand" ref="raw_table">
 <el-table-column v-if="isExpand" type="expand">
  <template scope="scope">
   <slot name="expand" :$index="scope.$index" :row="scope.row"></slot>
  </template>
 </el-table-column>
</el-table>
...
props: ['tableData','tableKey','isExpand','isExpandOnly'],
methods: {
 handleExpand(row,is_expand){
  if(this.isExpand && this.isExpandOnly){
   this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
  }
 }
}

其他的（排序、多选）操作也是类似添加。。。多不赘述。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue使用NProgress进度条的方法

    Vue使用NProgress进度条的方法

    这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vue如何给组件添加点击事件 @click.native

    Vue如何给组件添加点击事件 @click.native

    这篇文章主要介绍了Vue如何给组件添加点击事件 @click.native，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue props对象validator自定义函数实例

    vue props对象validator自定义函数实例

    今天小编就为大家分享一篇vue props对象validator自定义函数实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解

    Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解

    在vue中进行前端网页开发时,通常列表数据用el-table展示,下面这篇文章主要给大家介绍了关于Vue+ElementUi实现点击表格中链接进行页面跳转与路由的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue 封装防刷新考试倒计时组件的实现

    Vue 封装防刷新考试倒计时组件的实现

    这篇文章主要介绍了Vue 封装防刷新考试倒计时组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 离线搭建vue环境运行项目完整步骤

    离线搭建vue环境运行项目完整步骤

    这篇文章主要给大家介绍了关于离线搭建vue环境运行项目的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • vue的列表交错过渡实现代码示例

    vue的列表交错过渡实现代码示例

    这篇文章主要介绍了vue的列表交错过渡实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue百度地图 + 定位的详解

    vue百度地图 + 定位的详解

    这篇文章主要介绍了vue百度地图 + 定位的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 详解Nuxt.js Vue服务端渲染摸索

    详解Nuxt.js Vue服务端渲染摸索

    本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • vue实现简单表格组件实例详解

    vue实现简单表格组件实例详解

    vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，vue三大核心组件 路由 状态管理，路由控制页面的渲染，页面由组件组成，数据有vuex进行管理和改变。下面我会以一个简单的案例来说
    2017-04-04

最新评论