<template>
  <div>
    <el-table :data="data">
      <template v-for="(v,i) in columns">
        <el-table-column
          v-if="v.type === undefined"
          :type="v.type"
          :key="i"
          :column-key="v.columnKey"
          :index="v.index"
          :label="v.label"
          :prop="v.prop"
          :width="v.width"
          :min-width="v.minWidth"
          :fixed="v.fixed"
          :render-header="v.renderHeader"
          :sortable="v.sortable"
          :sort-method="v.sortMethod"
          :sort-by="v.sortBy"
          :sort-orders="v.sortOrders"
          :resizable="v.resizable"
          :formatter="v.formatter"
          :show-overflow-tooltip="v.showOverflowTooltip"
          :align="v.align"
          :header-align="v.headerAlign"
          :class-name="v.className"
          :label-class-name="v.labelClassName"
          :selectable="v.selectable"
          :reserve-selection="v.reserveSelection"
          :filters="v.filters"
          :filter-placement="v.filterPlacement"
          :filter-multiple="v.filterMultiple"
          :filter-method="v.filterMethod"
          :filtered-value="v.filteredValue">
          <template slot-scope="scope">
            <!-- 如果有filter -->
            <Cell
            v-if="v.render"
            :row="scope.row"
            :column="scope.column"
            :index="scope.$index"
            :render="v.render"></Cell>
            <!-- <span v-if="v.filter">
              {{Vue.filter(v[filter])(scope.row[v.prop])}}
            </span>
            <span v-else-if="v.formatter">
              {{v.formatter(scope.row)}}
            </span> -->
            <span v-else>
              {{scope.row[v.prop]}}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>


<script>
import { Table } from 'element-ui';
import Vue from 'vue';
import Cell from './expand';

export default {
  name:'dm-table',
  components:{
    'el-table':Table,
    Cell
    // 'test-com':this.propComponents[0]
  },
  props:['columns','data','propComponents'],
  created() {
  },
  methods:{
    compile(template) {
      // this.$nextTick(_ => {
        // console.log(this,this.$parent)
        // compile
      // })

      // const span = document.createElement('span');
      // span.innerHTML = template;
      // // console.log(this);
      // const dom = this.compile(span);    // 在父级上下文编译组件
      // // return dom;
      // this.$el.appendChild(dom);    // 将编译后的html插入当前组件
    }
  }
}
</script>
