技術標籤：elementUI

一、封裝的表格元件

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" border v-loading="load">
          <template v-for="(item, index) of table">
            <!--if判斷的是父元件傳的表頭是操作的id名，對需要特殊處理的列進行特殊的處理--
 
>
            <el-table-column
              v-if="item.id === 'operation'"
              :key="index"
              :prop="item.id"
              :label="item.name"
              :align="item.align ? item.align : 'center'"
              :width=
 
"item.width"
            >
              <!--可以自行增加按鈕，請改變點選事件的第二個引數，父元件會根據第二個引數判斷當前點選的是什麼按鈕-->
              <template slot-scope="scope">
                <el-button
                  v-for="item1 in item.list"
                  :key="item1.id"
 

                  @click="examine(scope.row, item1.id)"
                  type="text"
                  size="small"
                  >{{ item1.name }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="item.id === 'sectionName'"
              :label="item.name"
              :key="index"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
              <template slot-scope="scope">
                <span
                  style="color: blue; cursor: pointer"
                  @click="
                    details('斷面詳情-' + scope.row.sectionName, scope.row._id)
                  "
                  >{{ scope.row.sectionName }}</span
                >
              </template>
            </el-table-column>
            <!-- 定義了一個全域性過濾器，可以將毫秒數轉化為日期格式 -->
            <el-table-column
              v-else-if="item.id === 'sectionUpdateTime'"
              :label="item.name"
              :key="index"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
              <template>{{ item.sectionUpdateTime | dateFormat }}</template>
            </el-table-column>
            <!--可以傳align,width和type來控制表格的居中，寬度和型別（比如需要序號，type傳index）-->
            <el-table-column
              v-else
              :label="item.name"
              :key="index"
              :prop="item.id"
              :align="item.align ? item.align : 'center'"
              :width="item.width"
              :type="item.type"
            >
            </el-table-column>
          </template>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'tableList',
  // 父元件傳過來的值
  props: ['table', 'tableData', 'load'],
  methods: {
    // 呼叫父元件的方法
    examine(rows, id) {
      this.$emit('operation', { id: id, rows: rows })
    },
    details(name, id) {
      this.$emit('toDetails', { name, id })
    },
  },
}
</script>

二、在父元件引入登錄檔格元件

import TableList from '@/com/table.vue'
----------------
export default {
 components: {
    TableList
  },
 }

三、在父元件template中使用表格元件

<template>
  <div style="height: 100%">
    <table-list
      :table="table"
      :tableData="tableData"
      @operation="getExamine"
      @toDetails="details"
      :load="load"
    ></table-list>
  </div>
</template>

四、在父元件data中定義表格展示資料

 data() {
    return {
      load: false, //是否有載入動畫
      table: [
        //表頭
        { type: 'selection' },
        { type: 'index', name: '#' },
        { id: 'sectionName', name: '名稱' },
        { id: 'sectionMaintainGrid', name: '資料維護' },
        { id: 'sectionPublic', name: '是否公有' },
        { id: 'sectionMaintainer', name: '資料維護人' },
        { id: 'sectionUpdateTime', name: '最新修改時間' },
        {
          id: 'operation',
          name: '操作',
          list: [
            { id: 'examine', name: '檢視' },
            { id: 'compile', name: '編輯' },
            { id: 'delete', name: '刪除' },
          ],
        }, // id名是固定的，如若改變，請同時改變table元件對應的地方
      ],
      tableData: [
        // 資料內容
        {
          sectionName: '北京',
          sectionMaintainGrid: '華北電網',
          sectionPublic: '是',
          sectionMaintainer: '小北',
          sectionUpdateTime: new Date().getTime(),
        },
      ],
    }
  }

五、在父元件methods定義表格將要呼叫的方法

 methods: {

    getExamine(e) {
      // 根據table元件傳的不同的id進行不同的操作
     //to do something
    },
 
    details(e) {
     // to to something
    },
  },