Vue.js 中使用 Element UI 表格显示无属性纯列表数据
要在 Element UI 的 el-table 中输出无属性的纯列表数据,可以使用 el-table-column 组件来定义列表的每一列。
首先,需要将无属性的纯列表数据绑定到 el-table 的 data 属性上。例如,假设纯列表数据为一个数组,可以将其绑定到 data 属性上:
data() {
return {
tableData: ['Item 1', 'Item 2', 'Item 3']
}
}
然后,使用 el-table-column 组件来定义列表的每一列。由于无属性的纯列表数据没有任何属性可以显示,可以直接在 el-table-column 组件中使用 slot 插槽来输出数据。例如,可以使用 default 插槽来输出纯列表数据:
<el-table :data="tableData">
<el-table-column label="Items">
<template slot-scope="scope">
{{ scope.row }}
</template>
</el-table-column>
</el-table>
在上面的例子中,使用 default 插槽来输出纯列表数据,通过 scope.row 访问当前行的数据。
原文地址: http://www.cveoy.top/t/topic/15h 著作权归作者所有。请勿转载和采集!