vue基于el-table自定义table组件

自定义table组件

  <template>
    <div>
      <el-table ref="_myTb" :data="tableData" style="width: 100%">
        <template v-for="(item, index) in fieldList">
          <el-table-column v-if="typeInference(item)" v-bind="item" :key="columnKey(item, index)">
            <template slot="header" slot-scope="scope">
              <slot :name="slotName(item, 'headerScope')" :scope="scope">
                <template v-if="item.editable">
                  {{ scope.column.label }}
                  <i class="el-icon-edit-outline"></i>
                </template>
                <template v-else-if="openRtSet && item.operable">
                  {{ scope.column.label }}
                </template>
                <template v-else>{{ scope.column.label }}</template>
              </slot>
            </template>
            <template slot-scope="scope">
              <template v-if="item.editable">
                <div v-if="editor(scope.row, scope.column, scope.$index)">
                  <slot :name="slotName(item)" :scope="{
                    row: scope.row,
                    column: scope.column,
                    $index: scope.$index
                  }">
                    <el-input v-model.trim="scope.row[item.prop]"></el-input>
                  </slot>
                </div>
                <div v-else>
                  <i v-if="editorChangeIcon(scope.row, scope.column.property)"
                    class="el-icon-caret-left editorIcon"></i>
                  <template v-if="typeof item.formatter === 'function'">
                    <div v-html="
                      item.formatter(
                        scope.row,
                        scope.column,
                        scope.cellValue,
                        scope.index
                      )
                    "></div>
                  </template>
                  <template v-else>{{ scope.row[item.prop] }}</template>
                </div>
              </template>
              <template v-else-if="item.scope">
                <slot :name="slotName(item, 'scope')" :scope="scope"></slot>
              </template>
              <template v-else-if="item.render">
                <ex-slot :render="item.render" :params="scope" />
              </template>
            </template>
          </el-table-column>
          <el-table-column v-else-if="typeInference(item, 'normal')" v-bind="item" :key="index">
            <template slot="header" slot-scope="scope">
              <slot :name="slotName(item, 'headerScope')" :scope="scope">
                <template v-if="openRtSet && item.operable">
                  {{ scope.column.label }}
                </template>
                <template v-else>{{ scope.column.label }}</template>
              </slot>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </template>

  <script>
    export default {
      props: {
        tableInfo: {
          type: Object,
          default () {
            return {}
          }
        }
      },
      data() {
        return {
          openRtSet: false,
          fieldList: [],
          tableData: [],
        }
      },
      computed: {
        columnKey() {
          return function (item, index) {
            if (item.prop) return item.prop
            return item.type ? item.type : index
          }
        },
        typeInference() {
          return function (item, type) {
            if (item.hidden) return false
            return type ? true : item.editable || item.scope || item.render
          }
        },
        slotName() {
          return function (item, type) {
            // 默认使用 prop 作为 slot name,特殊情况没有 prop 时,使用具体类型的值
            const name = item.prop ? item.prop : item[type]
            return type === "headerScope" ? `${name}Header` : name
          }
        },
      },
      created() {
        let tableInfo = this.tableInfo
        // 只显示show为true的列
        const list = [...tableInfo.fieldList]
        this.fieldList = list.filter(item => {
          // boss要求所有页面操作列宽度默认 200
          if (item.type === "action") {
            item.width = item.actWidth ? item.actWidth : 200
          }
          if (typeof item.show === "boolean") return item.show
          return true
        })
      },
      methods: {
        // 获取当前表格实例,用于调用表格提供的方法
        getTbInstance() {
          return this.$refs._myTb
        },
        // 获取当前表格数据
        getCurPageData() {
          return [...this.tableData]
        },
        // 直接绑定表格数据数据方法
        loadData(data) {
          this.tableData = data
        },
      }
    }
  </script>

测试自定义table组件

<template>
  <div>
    <my-table ref="tableInfo" :tableInfo="tableInfo" @row-click="handleSelect"></my-table>
    <button @click="getList">取消</button>
  </div>
</template>
<script>
  import MyTable from "@/components/custom/MyTable";
  export default {
    name: "TableTest",
    components: {
      MyTable
    },
    data() {
      return {
        tableInfo: this.getTableInfo(),
        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 弄'
        }]
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 设置tableInfo
      getTableInfo() {
        return {
          fieldList: [
            { prop: 'date', label: '日期', align: 'center', width: 120 },
            { prop: 'name', label: '姓名', align: 'center', width: 120 },
            { prop: 'address', label: '地址', align: 'center', width: 160 },
          ],
        }
      },
      getList() {
        this.$refs.tableInfo.loadData(this.tableData)
      },
      handleSelect(row) {
        this.$refs.tableInfo.getTbInstance().toggleRowSelection(row)
      },
    }
  };
</script>

父组件调用子组件方法this.$refs.tableInfo.methodXXX()

父组件获取子组件原生对象实例this.$refs.tableInfo.getTbInstance()，拿到原生对象后可以调用子组件原生对象的方法