For the use of the Element component, the most important thing is to clarify the effect you want to achieve. Just copy and paste the corresponding code from the official website. The most important thing is to read the documents provided by the official website of different components in order to achieve what you want. Effect
Common Components - Forms
- Table: Table: It is used to display multiple pieces of data with similar structure, and the data can be sorted, filtered, compared or other custom operations
The specific example key code code is as follows: ( comment is very important )
<template>
<div>
<!-- Table表格 -->
<!-- :data 表示通过v-bind绑定的一个数据模型data -->
<!-- :为v-bind的简写 -->
<!-- data="tableData"表示整个表格的所有数据来源 -->
<el-table :data="tableData" border style="width: 100%">
<!-- prop表示该列展示对象中哪一个属性 -->
<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>
</div>
</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 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style></style>The specific operation results are:
