v-for="(item,index) in tableDataFields"
show-overflow-tooltip
width="180px"
:prop="item"
:key="index"
:fixed="index == 0"
:column-key="index+''"
>
<template slot="header" slot-scope="scope">
<div
:title="scope.column.label"
:class="{'lightCol':curColIndex==index+''}"
>{{scope.column.label}}div>
template>
el-table-column>
大为震惊,我竟然能模拟出你数据,并为之震撼
第一步:添加多一个插槽
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
:label="item"
v-for="(item,index) in tableDataFields"
show-overflow-tooltip
width="180px"
:prop="item"
:key="index"
:fixed="index == 0"
:column-key="index+''">
<template slot="header" slot-scope="scope">
<div :title="scope.column.label">{{scope.column.label}}</div>
</template>
<template slot-scope="scope">
<div :title="scope.column.label">{{getData(scope, item)}}</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableDataFields: [ '日.期', '姓名', '地址' ],
tableData: [
{
'日.期': "2016-05-02",
'姓名': "王小虎",
'地址': "上海市普陀区金沙江路 1518 弄",
},
{
'日.期': "2016-05-04",
'姓名': "王小虎",
'地址': "上海市普陀区金沙江路 1517 弄",
},
{
'日.期': "2016-05-01",
'姓名': "王小虎",
'地址': "上海市普陀区金沙江路 1519 弄",
}
],
};
},
methods: {
getData (scope, item) {
return scope.row[item]
},
},
};
</script>
tableDataFields 贴一下看看呢