elementUI 动态加载列 并且 自定义列中数据中样式

动态加载列 并且 自定义列中数据中样式

tableData：列表数据

[{
staffID: '1001',
staffName: '张三',
post: '总监',
superior: [1],
sex: '男',
sMobile: '18800000001',
email: "123@163.com",
state: "正常",
creater: "管理员1",
entryTime: '2020-01-01',
createrTime: '2020-01-01',
remarks: '',
face: '',
faceUrl: ''
} ....]

cloDate：列的数据

[{
'id': 1,
'cloName': '头像',
'field': 'faceUrl',
'is': true
} ....]

faceIndex：想自定义样式的列的下标

<template>
<el-table :data="tableData" style="width: 100%;"
:header-cell-style="{background:'#f5f5f5',color:'#2f2f2f'}" ref="multipleTable" @selection-change="handleSelectionChange">

<el-table-column type="selection" width="55"></el-table-column>

<el-table-column v-for="(clo,i) in cloDate" :key="clo.field" v-if="clo.is && i < faceIndex" align="center"
:min-width="cloMinW" :prop="clo.field" :label="clo.cloName" show-overflow-tooltip>
</el-table-column>

<el-table-column v-for="clo in cloDate" :key="clo.field" v-if="clo.is && clo.field == 'faceUrl'" align="center"
:min-width="cloMinW" :prop="clo.field" :label="clo.cloName" show-overflow-tooltip>
<template slot-scope="scope">
<img :src="scope.row.face" width="18" height="18">
</template>
</el-table-column>

<el-table-column v-for="(clo,i) in cloDate" :key="clo.field" v-if="clo.is && i > faceIndex" align="center"
:min-width="cloMinW" :prop="clo.field" :label="clo.cloName" show-overflow-tooltip>
</el-table-column>

<el-table-column label="操作" min-width="20%" align="center" v-if="operationIndex!=0">
<template slot-scope="scope">
<el-tag @click="editFunc(scope.$index)" style="margin: 2px 5px;">编辑</el-tag>
<el-tag type="danger" @click="delFunc(scope.$index)" style="margin: 2px 5px;">删除</el-tag>
<el-tag type="success" @click="infoFunc(scope.$index)" style="margin: 2px 5px;">详情</el-tag>
<el-tag type="warning" @click="disFunc(scope.$index)" style="margin: 2px 5px;">禁用</el-tag>
</template>
</el-table-column>
</el-table>
</template>

这里有个问题：

想自定义列的样式 暂时只能自定义一列

多列暂时没想到

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link

• 上一篇： js 图片滑块验证
• 下一篇： vue 一直报 ERR_CONNECTION_REFUSED 错误