基于ele封装表格(Vue2)
在Vue2中,可以使用Element UI库来创建一个表格。以下是一个简单的例子,展示了如何使用Element UI的el-table
组件来创建一个基本的表格。
首先,确保你已经安装了Element UI,并在你的Vue项目中引入了Element UI。
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '赵小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '孙小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
在这个例子中,我们定义了一个名为tableData
的数组,它包含了一些具有date
、name
和address
属性的对象。el-table
组件使用:data
属性来接收这个数组,并渲染一个表格。每个el-table-column
定义了表格的一列,prop
属性指定了对应的数据属性名。
评论已关闭