<template>
  <div class="elTable" >
      <!-- v-loading="loading" -->
    <el-table
      :ref="ref"
      :data="data"
      v-bind="table"
    >
      <!-- <template v-for="(column, index) in columns">
        <el-table-column
          v-if="!column._hidden_ && column.type && !column._slot_"
          :key="index"
          v-bind="column"
        />
        <el-table-column
          v-else-if="!column._hidden_"
          :key="index"
          v-bind="column"
        >
          <template slot="header" slot-scope="scope">
            <span>{{ column.label }}</span>
            <span
              v-if="column._screen_"
            >
              <i
                v-if="column._screen_tip_ === false"
                :style="isHasScreenColumn(column) ? 'color:#3888e5;' : ''"
                class="el-icon-connection"
              />
              <el-tooltip
                v-else
                class="item"
                :effect="column._screen_tip_effect_ || 'dark'"
                :content="column._screen_tip_ || '筛选'"
                :placement="column._screen_tip_placement_ || 'top'"
              >
                <i
                  :style="isHasScreenColumn(column) ? 'color:#3888e5;' : ''"
                  class="el-icon-connection"
                />
              </el-tooltip>
            </span>
          </template>
          <slot
            v-if="column._slot_"
            slot-scope="scope"
            :name="column._slot_"
            :scope="scope"
          />
          <template v-else-if="column._render_" slot-scope="scope">
            <ex-slot
              :column="column"
              :render="column._render_"
              :scope="scope"
            />
          </template>
          <template v-else slot-scope="scope">
            <span
              v-html="
                column._format_
                  ? column._format_(scope.row)
                  : getObjPrototype(scope.row, column.prop)
              "
            />
          </template>
        </el-table-column>
      </template> -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: "elTable",
  props: {
      ref:{
          type:String,
          default:"elTable"
      },
    // loading: {
    //   type: Boolean,
    //   default: false,
    // },
    /**
     * el-table 属性集合
     * 自定义属性：
     * @param {Array} _defaultHeader_  : 默认的表格头部，支持['setcol', 'screen'] setcol-列设置 screen-筛选
     * 可使用插槽扩展表格头部：
     * table-header - 具名插槽
     * slotProps：selection - 表格选中的数据  alldata - 表格当前全部数据
     * <template #table-header="slotProps">
     *   <el-button size="small" @click="click(slotProps)">扩展1</el-button>
     * </template>
     */
    table: {
      type: Object,
      default: () => {},
    },
    // el-table 表格数据 对应data字段
    data: {
      type: Array,
      default: () => [],
    },
    /**
     * el-table-column 表格列属性集合
     * 自定义属性：
     * @param {Boolean}       _noset_        : 是否不允许设置列
     * @param {Boolean}        _screen_      : 是否允许筛选
     * @param {Boolean}        _hidden_      : 是否隐藏列
     * @param {String/Boolean} _screen_tip_  : 筛选按钮提示信息，为false不提示
     * @param {String} _screen_tip_effect_   : 筛选按钮提示信息主题，dark/light
     * @param {String} _screen_tip_placement_: 筛选按钮提示信息位置，top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
     * @param {Array}          _keys_        : 支持的筛选key
     * @param {Array}      _select_options_  : 若需支持包含select的key，value的备选数据，示例：{_select_options_: [{id:'', label:''},...]}
     * @param {Array}  _select_options_end_  : 若需支持包含select的key，value_end的备选数据，默认使用_select_options_，示例：{_select_options_: [{id:'', label:''},...]}
     * @param {Array}          _keys_        : 支持的筛选key
     * @param {String}         _slot_        : 使用具名插槽时的名称
     * @param {Function}       _format_      : 数据格式化函数，支持返回html
     * @param {Function}       _render_      : 自定义列，采用vue中的render函数，示例: { _render_:(h, scope) => { return h(...) } }
     */
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 获取对象的属性
    getObjPrototype(o, a) {
      const fn = Function;
      return new fn("obj", `return obj.${a}`)(o);
    },
    /** 表格方法 传递给el-table，后续有需要可继续增加 **/
    // 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法
    doLayout(...arg) {
      this.$refs.elTable.doLayout(...arg);
    },
    // 用于多选表格，清空用户的选择
    clearSelection(...arg) {
      this.$refs.elTable.clearSelection(...arg);
    },
    // 用于多选表格，切换某一行的选中状态
    toggleRowSelection(...arg) {
      this.$refs.elTable.toggleRowSelection(...arg);
    },
    // 用于多选表格，切换所有行的选中状态
    toggleAllSelection(...arg) {
      this.$refs.elTable.toggleAllSelection(...arg);
    },
    // 用于单选表格，设定某一行为选中行
    setCurrentRow(...arg) {
      this.$refs.elTable.setCurrentRow(...arg);
    },
    // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
    toggleRowExpansion(...arg) {
      this.$refs.elTable.toggleRowExpansion(...arg);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>