vue 如何打印el-table列表
时间: 2023-10-07 15:07:08 浏览: 40
在 Vue 中,可以通过在 el-table 上使用 special "ref" 属性来获取该组件的引用,并通过该引用来访问该组件的方法和属性。
以下是一个简单的示例,演示如何在 Vue 中打印 el-table 的数据:
```html
<template>
<div>
<el-table
:data="tableData"
ref="table"
style="width: 100%">
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="age"
label="Age"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
<el-button @click="printTableData">Print Table Data</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 18, address: '123 Main St' },
{ name: 'Jane', age: 22, address: '456 Oak St' },
{ name: 'Bob', age: 30, address: '789 Maple St' }
]
}
},
methods: {
printTableData() {
console.log(this.$refs.table.data)
}
}
}
</script>
```
在此示例中,el-table 组件被分配了 ref 属性 "table"。使用 $refs 属性,我们可以访问该组件的 data 属性并将其打印到控制台中。在此示例中,我们使用一个 el-button 组件来触发 printTableData 方法,该方法在控制台中打印表格数据。