html部分:
<!-- 表格开始 -->
<el-table :data="tableData"
class="customer-table"
:header-cell-style="{ background: 'linear-gradient(to top, #141622, #30344B)' }"
:row-style="{ border: 'none' }"
:row-class-name="tableRowClassName"
size="small"
style="width: 100%">
<el-table-column v-for="(item, index) in tableTitle"
:key="index"
:show-overflow-tooltip="true"
:prop="item.prop"
:width="item.width"
align="center"
:label="item.title">
<template slot-scope="scope">
<div v-if="item.prop == 'yingyong'"
class="yingyong">
<p v-for="(item2, index) in scope.row[item.prop]"
:key="index">{{index+1 + '、'+item2 }}
</p>
</div>
<div v-else-if="item.prop == 'caozuo'"
class="caozuo">
<i v-for="(item2, index) in scope.row[item.prop]"
class="iconfont"
:key="index">{{ item2 }}
</i>
</div>
<div v-else>
{{ scope.row[item.prop] }}
</div>
</template>
<!-- <template v-if="item.prop == 'xuhao'"
slot-scope="scope">
{{ scope.row[item.prop] }}
</template> -->
</el-table-column>
</el-table>
<div class="bottomBar"></div>
<!-- 表格结束 -->
js数据部分:
data () {
return {
value: 1,
options: '',
tableTitle: [{
title: "序号",
prop: "xuhao",
width: "80%"
},
{
title: "部门名称",
prop: "name",
width: "100%"
},
{
title: "所属部门",
prop: "haoma",
width: "100%"
},
{
title: "部门状态",
prop: "gongsi",
width: "100%"
},
{
title: "创建时间",
prop: "bumen",
width: "100%"
},
{
title: "操作",
prop: "zhanghao",
width: "100%"
},
{
title: "用户状态",
prop: "zhuangtai",
width: "100%"
},
{
title: "可访问应用",
prop: "yingyong",
width: "200%"
},
{
title: "有效期",
prop: "youxiaoqi",
width: "100%"
},
{
title: "注册时间",
prop: "zhuceshijian",
width: "100%"
},
{
title: "操作",
prop: "caozuo",
width: "200%"
}
],
tableData: [{
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ['\ue626', '\ue625', '\ue628', '\ue629']
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '1',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}, {
xuhao: '10',
name: '王小虎',
haoma: '1355555555',
gongsi: '科比特',
bumen: '研发部',
zhanghao: '123456',
zhuangtai: '有效',
yingyong: ["电力", "风力", "火力"],
youxiaoqi: "2016-05-04",
zhuceshijian: "2016-05-04",
caozuo: ''
}
],
}
},
其中 scope.row表示:data="tableData"