element-table封装

封装组件

<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="index" :index="indexMethod" width="60" label="序号" align="center" />
      <template v-for="(info, infoIndex) in tableInfo">
        <el-table-column :key="infoIndex" :prop="info.key" :label="info.value" align="center" :min-width="info.minWidth" show-overflow-tooltip fixed="right">
          <template slot-scope="scope">
            <!-- <slot v-if="info.dealData" :name="info.key" :data="scope.row" :index="infoIndex" /> -->
            <span>{{ scope.row[info.key] }}</span>
          </template>
        </el-table-column>
      </template>
      <!-- 是否需要操作列，默认不需要，需要时父组件设置operateShow，记得传操作这一列的宽度，否则默认宽为200 -->
      <el-table-column v-if="operateShow" label="操作" align="center" :min-width="operateWidth" fixed="right">
        <template>
          <slot name="operate" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: () => [] }, // 数据
    tableInfo: { type: Array, required: true }, // 表头
    operateShow: { // 操作栏是否显示，默认不显示
      type: Boolean,
      default: false
    },
    operateWidth: { // 操作栏宽
      type: String,
      default: '150'
    },
    page: { // 多少页
      type: Number,
      default: 1
    },
    limit: { // 每页多少条
      type: Number,
      default: 10
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // 表格自定义序号
    indexMethod(index) {
      return (this.page - 1) * this.limit + (index + 1)
    }
  }
}
</script>

<style scoped>

</style>

父组件使用

<template>
  <div id="app">
    <Table :list="list" :table-info="tableInfo" operate-show operate-width="100">
        <template slot="operate">
          <el-button type="text" size="small">查看详情</el-button>
        </template>
      </Table>
  </div>
</template>

<script>
import Table from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    Table
  },
  data() {
    return {
      tableInfo: [
        { key: 'display_time', value: '房间', 'minwidth': 150 },
        { key: 'pageviews', value: '报修类型', 'minwidth': 150 },
        { key: 'author', value: '学校说明', 'minwidth': 150 }
      ],
      // 后台给的数据
      list:[
       
      ]
    }
  },
  methods: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>