iview的table：自定义table表格中列头的标题和点击事件（renderHeader）
Posted wssdx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了iview的table：自定义table表格中列头的标题和点击事件（renderHeader）相关的知识，希望对你有一定的参考价值。
<Table
class="table"
:columns="columns1"
:data="tableData"
highlight-row
:max-height="500"
border
@on-selection-change="onSelectionChange"
@on-row-click="onRowClick"
>
<!-- 重量 -->
<template slot-scope="{ row, index }" slot="weight">
<Input v-model="tableData[index].weight" placeholder="请输入..." class="form-width" />
</template>
</Table>
columns1: [
{
title: ‘重量‘,
slot: ‘weight‘,
align: ‘center‘,
key: ‘weight‘,
renderHeader: (h, params) => {
return h(‘div‘,[
h(‘span‘, {}, ‘重量‘),
h(‘Icon‘, {
props: {
type: ‘ios-copy-outline‘,
size: ‘18‘
},
on: {
‘click‘: (event) => {
this.weightCopy(event);
}
}
})
])
},
}
],
// 重量值拷贝功能
weightCopy(e){
if (this.tableData.length && this.tableData[0].weight) {
this.tableData.map((item, index) => {
this.tableData.splice(index, 1, {
...item,
weight: this.tableData[0].weight
})
})
} else {
this.$Message.warning(‘第一行值为空，不能复制！‘)
}
},
以上是关于iview的table：自定义table表格中列头的标题和点击事件（renderHeader）的主要内容，如果未能解决你的问题，请参考以下文章