ElementUI-----UI框架_element ui

ElementUI是由饿了么团队开源的UI框架，并于Vue完美契合。项目地址：https://github.com/ElemeFE/element

项目文档：Element - The world's most popular Vue UI framework

要使用elementui现成的资源，需要在Vue中先导入elementui,将其设为全局组件，然后就可以在官方文档中复制现成的控件代码来使用了。

1.选择需要的控件，点击扩展按钮即可展示前端代码

1.安装elementui:

        cnpm i element-ui -S

2.导入main.js入口函数中：

以上导入方式适用于Vue2中，不适用Vue3,Vue3导入方式如下：

        1.先安装element-plus

                 cnpm install --save element-plus

        2.导入：

组件中使用elment-ui组件的示例：

        1.components中新增组件：projects.vue

<!--ref为一个元素或者子组件的引用，组件中定义的所有ref都会放在当前组件的$refs属性中-->

<!--1.从element-ui中复制组件代码-->
<!--2.el-table为整个table控件，属性:data 就是v-bind绑定的数据对象，来自于data返回的tableData对象； el-table-column为里面的每一列-->
<!--3.el-table-column中的type属性代表这列的属性，若是selection，则说明此列是选择框-->
<!--4.el-table-column中的prop,用于绑定循环时数据对象所赋的值，lable用于显示此列的头信息-->
<!--5.el-table-column中的prop原理：数据对象会把数据给所有的含有el-table-column的标签，每个标签会根据自己标签中含有的prop值，去数据
      对象中取对应的值，比如：某个标签中prop的值为name，这个标签就把数据对象中的name对应的数据取出来赋值给自己显示-->
<template>
  <el-table
      class="project_tabel"
      <!--ref为一个元素或者子组件的引用，组件中定义的所有ref都会放在当前组件的$refs属性中-->
      ref="multipleTable"
      :data="tableData"
      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
        prop="leader"
        label="项目负责人"
        width="120">
    </el-table-column>
    <el-table-column
        prop="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>
</template>
 
<script>
export default {
  name: "projects",
  data() {
    return {
      projects_head: ["项目名称", "项目负责人", "应用名称"],
      tableData:[
        {name:"项目1111",leader:"chuntian",app_name:"吃饱了撑的app"},
        {name:"项目2222",leader:"22222",app_name:"走吧222"},
        {name:"项目3333",leader:"3333",app_name:"奔跑吧3333"},
      ],
      // data（）中定义的都是属性，此处定义空数组，methods中的方法才可以调用修改此属性数组。
      multipleTable:[]
    }
  },
  // 定义的js函数都写在methods中
  methods:{
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        // this类似self，通过$refs.属性名 调用组件属性的数据。
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>
 
<style scoped>
/*此处更加el-table的class属性，调整整个el-table的样式*/
.project_tabel{
  margin:50px 500px;
}
</style>

        2.将组件导入根组件App.vue中使用

<!--tempalet 部分用于展示给用户，相当于MVVM模式中的V-->
<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png">
<!--3. 引用-->
    <projects></projects>
  </div>
</template>
 
<!--script标签内是js组件  -->
<script>
//1. 导入
import projects from "./components/projects"
 
export default {
  // 定义组件名称
  name: 'App',
 
  //2. 声明
  components: {
    projects,
  }
 
}
</script>
 
<!--style标签内：视图的样式-->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

        3.效果：

                点击选择框选择数据后，点击Clear selection，能全部取消选择

示例完毕。