Skip to content

T
template_vue
Commit 7c50d3fc authored by CenXinYi's avatar CenXinYi
Browse files
Options

优化Table组件样式 

Signed-off-by: 's avatarCenXinYi <2810162984@qq.com>
parent aa4027d9
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 62 deletions
src/components/Table/BaseTable/index.vue
View file @ 7c50d3fc
<template> <template>
<div style="padding:5px 10px"> <div style="padding:5px 10px">
<div class="mb12 font-small-bold">{{ allTableArguments.listName }}</div> <div class="mb12 font-small-bold">{{ allTableArguments.listName }}</div>
<div class="tableList"> <!-- TODO:如果需要定长度的话可以使用这个在组件外部 <div class="tableList" style=" height: 600px;">-->
<el-scrollbar> <el-scrollbar style="height: 100%;">
<el-table <el-table
v-loading="allTableArguments.loading" v-loading="allTableArguments.loading"
class="processList" class="processList"
border border
:data="allTableArguments.List" :data="allTableArguments.List"
style="width: 100%" style="width: 100%;"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="index" label="序号" width="50"/> <el-table-column type="index" label="序号" width="50" />
<!-- TODO: 选择框是否开启，selectable控制是否单行禁用 --> <!-- TODO: 选择框是否开启，selectable控制是否单行禁用 -->
<el-table-column v-if="allTableArguments.columObj.selection" type="selection" :selectable="allTableArguments.columObj.selectable" width="50px" /> <el-table-column v-if="allTableArguments.columObj.selection" type="selection" :selectable="allTableArguments.columObj.selectable" width="50px" />
<!-- TODO: 普通列 --> <!-- TODO: 普通列 -->
<el-table-column <el-table-column
v-for="(column,columIndex) in allTableArguments.columObj.columnData" v-for="(column,columIndex) in allTableArguments.columObj.columnData"
:key="columIndex" :key="columIndex"
:prop="column.prop" :prop="column.prop"
:label="column.label" :label="column.label"
:width="column.width" :width="column.width"
:fixed="column.fixed" :fixed="column.fixed"
:align="column.align || 'center'" :align="column.align || 'center'"
:sortable="column.sortable" :sortable="column.sortable"
:index="columIndex" :index="columIndex"
show-overflow-tooltip show-overflow-tooltip
> >
<template slot-scope="{row,$index}"> <template slot-scope="{row,$index}">
<!-- 默认展示 --> <!-- 默认展示 -->
<span v-if="column.text && column.editRow !== $index">{{ row[column.prop] || '-' }}</span> <span v-if="column.text && column.editRow !== $index">{{ row[column.prop] || '-' }}</span>
<!-- 状态对象展示 --> <!-- 状态对象展示 -->
<span v-if="column.status && row[column.prop]">{{ row[column.prop].msg }}</span> <span v-if="column.status && row[column.prop]">{{ row[column.prop].msg }}</span>
<!-- 自定义内容 --> <!-- 自定义内容 -->
<span v-if="column.ownDefined">{{ column.ownDefinedReturn(row,$index) }}</span> <span v-if="column.ownDefined">{{ column.ownDefinedReturn(row,$index) }}</span>
<!-- TODO: 时间数据 --> <!-- TODO: 时间数据 -->
<span v-if="column.time">{{ row[column.prop] | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span> <span v-if="column.time">{{ row[column.prop] | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
<!-- switch开关 --> <!-- switch开关 -->
<el-switch v-if="column.switch" v-model="row[column.prop]" :inactive-text="row[column.prop] ? column.openText:column.closeText" @change="switchChange(row,$index,column.prop)" /> <el-switch v-if="column.switch" v-model="row[column.prop]" :inactive-text="row[column.prop] ? column.openText:column.closeText" @change="switchChange(row,$index,column.prop)" />
<!-- 图片展示 --> <!-- 图片展示 -->
<el-popover trigger="hover" placement="top" popper-class="popper"> <el-popover trigger="hover" placement="top" popper-class="popper">
<img v-if="column.image" :src="viewUrl + row[column.prop]" alt=""> <img v-if="column.image" :src="viewUrl + row[column.prop]" alt="">
<el-image v-if="column.image" slot="reference" :src="viewUrl + row[column.prop]" /> <el-image v-if="column.image" slot="reference" :src="viewUrl + row[column.prop]" />
</el-popover> </el-popover>
<!-- 图片数组 --> <!-- 图片数组 -->
<el-popover v-if="column.imageArr" trigger="hover" placement="top" popper-class="popper"> <el-popover v-if="column.imageArr" trigger="hover" placement="top" popper-class="popper">
<img v-if="row[column.prop].length>0" :src="row[column.prop][0]" alt=""> <img v-if="row[column.prop].length>0" :src="row[column.prop][0]" alt="">
<el-image v-if="row[column.prop].length >0" slot="reference" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" /> <el-image v-if="row[column.prop].length >0" slot="reference" :src="row[column.prop][0]" :preview-src-list="row[column.prop]" />
</el-popover> </el-popover>
<!-- 可编辑input，仅在text默认展示类型才可编辑--> <!-- 可编辑input，仅在text默认展示类型才可编辑-->
<el-input v-if="column.editRow === $index" v-model="row[column.prop]" v-focus @blur="editInputBlur(row,$index,column.prop,columIndex)" /> <el-input v-if="column.editRow === $index" v-model="row[column.prop]" v-focus @blur="editInputBlur(row,$index,column.prop,columIndex)" />
<!-- 操作按钮 --> <!-- 操作按钮 -->
<span v-if="column.isOperation" class="processListBtns"> <span v-if="column.isOperation" class="processListBtns">
<span v-for="(operations, index) in column.operation" :key="index"> <span v-for="(operations, index) in column.operation" :key="index">
<el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail(row,$index)">{{ operations.label }}</el-button> <el-button v-if=" operations.clickType === '1' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDetail(row,$index)">{{ operations.label }}</el-button>
<el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate(row,$index)">{{ operations.label }}</el-button> <el-button v-else-if=" operations.clickType === '2' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleUpdate(row,$index)">{{ operations.label }}</el-button>
<el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete(row,$index)">{{ operations.label }}</el-button> <el-button v-else-if=" operations.clickType === '3' " :icon="operations.icon" :type="typeParent" :style="{color:operations.color}" :size="size" @click="handleDelete(row,$index)">{{ operations.label }}</el-button>
</span>
</span> </span>
</template> </span>
</el-table-column> </template>
</el-table> </el-table-column>
</el-scrollbar> </el-table>
<div /> </el-scrollbar>
</div> <div />
<!-- </div>-->
</div> </div>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment