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>
????<!--?表格結(jié)束?-->
js數(shù)據(jù)部分:
data?()?{
????return?{
??????value:?1,
??????options:?'',
??????tableTitle:?[{
????????title:?"序號",
????????prop:?"xuhao",
????????width:?"80%"
??????},
??????{
????????title:?"部門名稱",
????????prop:?"name",
????????width:?"100%"
??????},
??????{
????????title:?"所屬部門",
????????prop:?"haoma",
????????width:?"100%"
??????},
??????{
????????title:?"部門狀態(tài)",
????????prop:?"gongsi",
????????width:?"100%"
??????},
??????{
????????title:?"創(chuàng)建時間",
????????prop:?"bumen",
????????width:?"100%"
??????},
??????{
????????title:?"操作",
????????prop:?"zhanghao",
????????width:?"100%"
??????},
??????{
????????title:?"用戶狀態(tài)",
????????prop:?"zhuangtai",
????????width:?"100%"
??????},
??????{
????????title:?"可訪問應(yīng)用",
????????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:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?['\ue626',?'\ue625',?'\ue628',?'\ue629']
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'1',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????},?{
????????xuhao:?'10',
????????name:?'王小虎',
????????haoma:?'1355555555',
????????gongsi:?'科比特',
????????bumen:?'研發(fā)部',
????????zhanghao:?'123456',
????????zhuangtai:?'有效',
????????yingyong:?["電力",?"風力",?"火力"],
????????youxiaoqi:?"2016-05-04",
????????zhuceshijian:?"2016-05-04",
????????caozuo:?''
??????}
??????],
????}
??},
其中?scope.row表示:data="tableData"