【vue】初步使用element-ui框架

cd到当前项目，运行

cnpm i element-ui -S

接下来就是在项目里面引用了，打开src目录下的main.js

//导入vue.js
import Vue from 'vue'
//导入下面2个组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//导入App.vue根组件
import App from './App.vue'
//在导入Vue实例之前，要将element-ui插件加入到Vue中
Vue.use(ElementUI);
Vue.config.productionTip = falsenew Vue({render: h => h(App),//渲染App根组件
}).$mount('#app')

子组件vue文件中

<template>
//注意：要在最外层套一个div容器<div><el-table<！--ref为一个元素或者子组件的应用 --><!-- 组件中所有的ref都会放在$refs属性中>ref="multipleTable":data="tableData"class="projectnew"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="name"label="项目名称"width="120"></el-table-column><el-table-columnproperty="leader"label="负责人"width="120"></el-table-column><el-table-columnproperty="app_name"label="应用名称"show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection()">Clear selection</el-button></div></div>
</template><script>
export default {name: "projectlistNew",data() {return {project_header: ["项目名称", "负责人", "应用名称"],tableData: [{name: "吊炸天的项目", leader: "飞天小子", app_name: "很牛逼的应用"},{name: "非常厉害的项目", leader: "小旋风", app_name: "很神秘的应用"},{name: "很完美的项目", leader: "阿童木", app_name: "666的应用"}],// multipleTable:[],}
},methods: {toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;//在控制台打印日志console.log(this.multipleSelection)}}
}
</script><style scoped>
.projectnew {margin: 10px 500px;
}
</style>