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

cd到当前项目,运行

cnpm i element-ui -S

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

java 复制代码
//导入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 = false

new Vue({
  render: h => h(App),//渲染App根组件
}).$mount('#app')

子组件vue文件中

java 复制代码
<template>
//注意:要在最外层套一个div容器
  <div>
    <el-table
    <!--ref为一个元素或者子组件的应用 -->
    <!-- 组件中所有的ref都会放在$refs属性中>
        ref="multipleTable"
        :data="tableData"
        class="projectnew"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>

      <el-table-column
          prop="name"
          label="项目名称"
          width="120">
      </el-table-column>

      <el-table-column
          property="leader"
          label="负责人"
          width="120">
      </el-table-column>

      <el-table-column
          property="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>
相关推荐
小程序设计4 分钟前
【springboot+vue】高校迎新平台管理系统(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
会有钱的-_-16 分钟前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
知识分享小能手1 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇1 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript
Abadbeginning1 小时前
FastSoyAdmin centos7云服务器+宝塔部署
vue.js·后端·python
哆啦A梦15881 小时前
uniapp分包实现
前端·vue.js·uni-app·vue3
yuanpan1 小时前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
flower_tomb2 小时前
对浏览器事件机制的理解
前端·javascript·vue.js
超人不会飛2 小时前
仿豆包 H5应用核心模板:用Vue快速复刻大模型对话体验
前端·javascript·vue.js
程序张2 小时前
Vue3+Vite 现代化前端框架👊打破 Chrome 83 内核限制
前端·javascript·vue.js