vue的element的table封装成组件,并循环数据进行展示

这是效果图

1.在components文件夹下新建一个table.vue组件，代码如下

<template>
  <div class="table_box">
    <el-table
        :data="tableData"
        :border="border"
        :style="tstyle"
        :size="tsize"
        :header-cell-style="headerStyle">
        //最前面的复选框
        <el-table-column
          	v-if="check"
            type="selection"
            width="40">
        </el-table-column>
        //普通内容
        <template v-for="(item,i) in tableLabel">
       		//如果需要其他的内容，加上判断就行，前面传参数的时候加上
        	// 例：开关按钮
          <el-table-column
          v-if="item.switch"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :sortable="item.sort" :key="i">
            <template slot-scope="scope">
            //scope.row[item.prop] 其实是 scope.row['value'],为了灵活选择匹配类名
              <el-switch
                v-model="scope.row[item.prop]"
                @change="switchFn">
              </el-switch>
            </template>
          </el-table-column>
          //普通内容
          <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :sortable="item.sort" :key="i">
          </el-table-column>
        </template>
		//操作按钮
        <el-table-column v-if="operate" label="操作" width="200" align="center">
          <template slot-scope="scope">
                <template v-for="(item,i) in operate">
                  <el-button
                  v-if="item === 'edit'"
                  :key="i"
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                  v-if="item === 'delete'"
                  :key="i"
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </template>
        </el-table-column>
    </el-table>
  </div>
</template>

数据部分

<script>
export default {
  name: 'table1',
  data () {
    return {

    }
  },
  props: {
    tableData: {
      type: [Array, Object],
      required: true
    },
    tableLabel: {
      type: [Array, Object],
      required: true
    },
    headerStyle: {
      type: [Object],
      required: false,
      default: function () {
      	//var(...)：全局定义的颜色，方便修改，之前有解释的文章
        return { 'background-color': 'var(--tabtop)' }
      }
    },
    border: {
      type: [Boolean],
      required: false,
      default: true
    },
    check: {
      type: [Boolean],
      required: false,
      default: function () {
        return false
      }
    },
    operate: {
      type: [Boolean, Array],
      required: false,
      default: function () {
        return ['edit', 'delete']
      }
    },
    tstyle: {
      type: [Array, Object, String],
      required: false,
      default: function () {
        return { width: '100%' }
      }
    },
    tsize: {
      type: [String],
      required: false,
      default: function () {
        return 'mini'
      }
    }
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    switchFn (e) {
      console.log(e)
    }
  }

}

2.在需要的页面引入组件(如果闲单页面引入繁琐，前一篇文章就是全局引入组件)

参数	说明
tableData	表格数据,类型array（数组）（参数必填）
tableLabel	表头数据,类型array（数组）, (参数必填)
headerStyle	表头样式，类型: obj （对象） ,默认：{‘background-color’:’#FAFAFA’}
border	表格边框，类型：true/false （布尔值）,默认：true
check	是否带有复选框, 类型：true/false （布尔值）,默认：false
operate	是否带有操作按钮，类型array（数组）,默认：[‘edit’,‘delete’]
tstyle	表格样式，类型: obj （对象） , 默认：{ width: ‘100%’ }
tsize	表格尺寸，类型：string（字符串），默认：‘mini’

<Table :tableData="tableData" :tableLabel="tableLabel" :headerStyle="{'background-color':'var(--tabtop)'}" :operate="true" check="none"></Table>

<script>
//导入组件
import Table from '@/components/Table.vue'
export default {
  data () {
    return {
      tableData: [{
        id: 1,
        name: '魔力',
        ks_id: 11,
        operation: true,
        developer: '浏览',
        project: '后台',
        product: '电脑',
        cooperation: true,
        personnel: '技术',
        remark: '一级标签'
      }, {
        id: 2,
        name: '哈哈',
        ks_id: 12,
        operation: false,
        developer: '浏览',
        project: '函数',
        product: '手机',
        cooperation: true,
        personnel: '技术',
        remark: '二级标签'
      }],
      tableLabel: [
        { label: '合作商ID', width: '', prop: 'id' },
        { label: '合作商名称', width: '', prop: 'name' },
        { label: '合作商公司', width: '', prop: 'ks_id' },
        // switch:true 是否带有开关,sort:true 排序,如果还想加别的按钮等等，就这样的写法
        { label: '合作商状态', width: '', prop: 'operation', switch: true , sort:true},
        { label: '媒体类型', width: '', prop: 'developer' },
        { label: '返点百分比', width: '', prop: 'project' },
        { label: '备注', width: '', prop: 'product' },
        { label: '创建时间', width: '', prop: 'cooperation', switch: true },
        { label: '操作', width: '', prop: 'personnel' }
      ],
    }
  }
  components:{
	Table
  }
}
</script>