写一个iview表格纵向表头的代码用vue2.7
时间: 2023-04-01 09:02:50 浏览: 209
好的,以下是iview表格纵向表头的代码:
<template>
<div>
<Table :columns="columns" :data="data" :border="true"></Table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
key: 'name',
width: 100,
align: 'center',
render: (h, params) => {
return h('div', [
h('span', params.row.name),
h('span', { style: 'color: #999; font-size: 12px;'}, params.row.age)
]);
}
},
{
title: '性别',
key: 'gender',
width: 100,
align: 'center'
},
{
title: '语文',
key: 'chinese',
width: 100,
align: 'center'
},
{
title: '数学',
key: 'math',
width: 100,
align: 'center'
},
{
title: '英语',
key: 'english',
width: 100,
align: 'center'
}
],
data: [
{
name: '张三',
age: 18,
gender: '男',
chinese: 80,
math: 90,
english: 70
},
{
name: '李四',
age: 19,
gender: '女',
chinese: 85,
math: 95,
english: 80
},
{
name: '王五',
age: 20,
gender: '男',
chinese: 90,
math: 85,
english: 95
}
]
}
}
}
</script>
阅读全文
相关推荐














