安装ElementUI
npm i element-ui -S
提示2.15.1版本安装完成
导入并使用ElementUI:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
参考ElementUI创建组件,ElementUI同Vue组件的结构类似,使用起来非常便捷.
创建Mytable组件:
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"> </el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {},
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(20).fill(item),
};
},
computed: {},
created() {},
mounted() {},
watch: {},
methods: {},
components: {},
};
</script>
<style>
</style>
注册
router/index.js路由注册
{
path: ‘/mytable’,
name: ‘Mytable’,
component: Mytable
}
完成.