asinkj-ui/src/components/LTable/index.vue

<!-- 最后修改之前封装的组件 -->
<template>
  <div class="l-table">
    <!-- 表格 -->
    <el-table
      :data="props.tableModule.dataList"
      border
      height="100%"
      style="width: 100%; overflow-y: scroll"
      v-loading="props.tableModule.loading"
      @selection-change="props.tableModule.selectChange"
      :row-class-name="tableRowClassName"
      :cell-class-name="tableCellClassName"
      @cell-dblclick="cellDblClick"
    >
      <el-table-column type="selection" width="50" align="center" />
      <!-- v-for 循环拿到了外层，在 el-table-column 判断 item.show 就可以了 -->
      <template v-if="tableChildren == '1'" v-for="(item, index) in props.tableModule.columns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :align="item.align || 'left'"
          :width="item.width"
          :min-width="item.min_width"
          :fixed="item.fixed"
          v-if="item.show"
        >
          <template slot-scope="scope" #default="scope">
            <div v-if="item.type == 'switch'">
              <el-switch
                v-model="scope.row[item.prop]"
                :active-value="item.activeValue"
                :inactive-value="item.inactiveValue"
                @change="props.tableModule.switchChange(scope.row)"
              >
              </el-switch>
            </div>
            <div v-else-if="item.type == 'status'">
              <el-tag :type="item.color ? item.color[scope.row[item.prop]] : ''"
                >{{ props.tableModule.fieldChange(scope.row[item.prop], item.option) }}
              </el-tag>
            </div>
            <div v-else-if="item.type == 'image'">
              <el-image style="width: 60px; height: 60px" :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]"> </el-image>
            </div>
            <div v-else-if="item.type == 'time'">{{ formatDate(scope.row[item.prop]) }}</div>
            <div v-else-if="item.isEdit">
              <el-input
                v-model="scope.row[item.prop]"
                :placeholder="'请输入' + item.label"
                @blur="inputBlur(scope.row)"
                autofocus
                ref="inputRef"
                v-if="scope.row['index'] == rowIndex && scope.column['index'] == columnIndex"
              />
              <div v-else>{{ scope.row[item.prop] }}</div>
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
      </template>
      <!-- 这里无论循环一级还是二级都需要在template上去写循环 -->
      <template v-else-if="tableChildren == '2'" v-for="(one, index) in props.tableModule.columns">
        <el-table-column :label="one.label" v-if="one.show">
          <template v-for="item in props.tableModule.columns[index].children">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :align="item.align || 'left'"
              :width="item.width"
              :min-width="item.min_width"
              :fixed="item.fixed"
              v-if="item.show"
            >
              <template slot-scope="scope" #default="scope">
                <div v-if="item.type == 'switch'">
                  <el-switch
                    v-model="scope.row[item.prop]"
                    :active-value="item.activeValue"
                    :inactive-value="item.inactiveValue"
                    @change="props.tableModule.switchChange(scope.row)"
                  >
                  </el-switch>
                </div>
                <div v-else-if="item.type == 'status'">
                  <el-tag :type="item.color ? item.color[scope.row[item.prop]] : ''"
                    >{{ props.tableModule.fieldChange(scope.row[item.prop], item.option) }}
                  </el-tag>
                </div>
                <div v-else-if="item.type == 'image'">
                  <el-image style="width: 60px; height: 60px" :src="scope.row[item.prop]" :preview-src-list="[scope.row[item.prop]]"> </el-image>
                </div>
                <div v-else-if="item.type == 'time'">{{ formatDate(scope.row[item.prop]) }}</div>
                <div v-else-if="item.isEdit">
                  <el-input
                    v-model="scope.row[item.prop]"
                    :placeholder="'请输入' + item.label"
                    @blur="inputBlur(scope.row)"
                    autofocus
                    ref="inputRef"
                    v-if="scope.row['index'] == rowIndex && scope.column['index'] == columnIndex"
                  />
                  <div v-else>{{ scope.row[item.prop] }}</div>
                </div>
                <div v-else>{{ scope.row[item.prop] }}</div>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
      <slot name="event"></slot>
    </el-table>
    <div class="l-pages">
      <!-- 分页 -->
      <el-pagination
        :current-page="props.tableModule.pages.page"
        :page-size.sync="props.tableModule.pages.limit"
        :page-sizes="pageSizes"
        :layout="layout"
        :total="props.tableModule.pages.total"
        @size-change="props.tableModule.sizeChange"
        @current-change="props.tableModule.currentChange"
      />
    </div>
  </div>
</template>