1.首先npm i element-ui -S 安装element-ui
2.引入 Element
在 main.js 中写入以下内容：
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
3.封装公共组件
<!-- CustomTable.vue -->
<template><el-table :data="tableData" style="width: 100%" stripe v-loading="isLoading"><template v-for="column in columns"><el-table-column v-if="!column.useSlot" :key="column.prop" :prop="column.prop" :label="column.label" align="center" :min-width="column.minwidth" :fixed="column.fixed"></el-table-column><el-table-column v-else :key="column.prop + 1" :prop="column.prop" :label="column.label" align="center" :min-width="column.minwidth" :fixed="column.fixed"><template slot-scope="scope"><slot :name="column.prop" :scope="scope"></slot></template><template slot="header" v-if="column.header"><slot :name="column.prop + 'header'"></slot></template></el-table-column></template></el-table>
</template><script>
export default {props: {tableData: {type: Array,required: true},columns: {type: Array,required: true},isLoading: {type: Boolean,default: false}}
}
</script>4.全局注册
Vue.component('Table', Table)
5.使用
<Table :table-data="tableData" :columns="tableColumns"></Table>
tableData 传入数据
tableColumns传入表头
例如
tableColumns： [
{ prop: 'name', label: '名称', useSlot: false, minwidth: '120px'},
]
)
)
