127 lines
5.3 KiB
Vue
127 lines
5.3 KiB
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>
|