Element-UI使用与爬坑集合

 

目录

 

Element-UI使用与爬坑集合

一、Element-UI各UI控件属性使用加不加冒号（：）整理

二、el-menu组件作为route-view时候，刷新页面后，默认active状态（default-active）与当前路由页面不一致

三、el-table实现分页显示

四、el-table显示的表格中自己额外添加一列，序号：1，2，3……

4.1 添加一列，不管分不分页，都是从1、2、3……整个数组的长度

4.2 分页显示，添加一列序号，但是每页的序号都是从1、2、3……到每页显示的总条数

五、获取当前鼠标点击的元素的属性内容，区分鼠标点击的是哪个HTML元素

六、el-table获取点击click选中行的值

七、V-for渲染时候（比如table、li等），点击当前行，获得当前行数据，以及event当前事件对象

八、设置部分动态样式，部分固定样式

---

Element-UI使用与爬坑集合

一、Element-UI各UI控件属性使用加不加冒号（：）整理

正常情况下，加“：”表示赋值的是变量，不加表示赋值的是值本身。

但是有时候发现经常不管用，常见的如下：

如果属性类型为Number:

<el-col :xs="8" :sm="6" :md="4" :lg="3"><el-con>

如果属性类型为Object:  

<el-col :xs="{span:24,offset:0}"><el-col>

如果属性类型为string:  

<el-row type="flex"><el-row>

如果属性类型为boolean:

<el-button :plain="true" :disabled="true">主要按钮</el-button>

---

二、el-menu组件作为route-view时候，刷新页面后，默认active状态（default-active）与当前路由页面不一致

解决思路：给menu的default-active属性绑定this.$route.path

操作流程：

1）：设置default-active属性

 :default-active="this.$route.path"   //有的可能不需要加this

2）针对route.path的值，设置menu的index属性，与to路径一致即可。

 <el-menu-item index="/"><keep-alive><router-link to="/">统计分析</router-link></keep-alive></el-menu-item>
    <el-menu-item index="/xmlb"><keep-alive><router-link to="/xmlb">项目列表</router-link></keep-alive></el-menu-item>
    <el-menu-item index="/map"><keep-alive><router-link to="/map">地图展示</router-link> </keep-alive></el-menu-item>

---

三、el-table实现分页显示

实现思路：在el-table的data属性中，加一个根据分页动态slice的方法，算出每页该展示的内容

操作流程：

1）添加分页控件

<el-pagination
     @current-change="handleCurrentChange"
     :current-page.sync="currentPage"
     :page-size="pagesize"
      layout="total, prev, pager, next"
      :total="detailstableData_length">
</el-pagination>

2）设置el-table的data属性

 <el-table
     :data="detailstableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
     style="width: 100% ;" height='740'>
</el-table>

3) vue的script标签内，在data里面定义相关变量

export default{
    data(){
        return{
          detailstableData:[],   //存储table数据的
          detailstableData_length:0, //记录数据的总长度
          currentPage:1,   //当前显示第一页
          pagesize:10,   //每页10条记录
        }
    }
}

实现效果：

---

四、el-table显示的表格中自己额外添加一列，序号：1，2，3……

应用场景：

一般el-table表格中，每一行是一条json对象的记录，获得结果后，需要额外给结果添加一列序号，便于在table中展示。

4.1 添加一列，不管分不分页，都是从1、2、3……整个数组的长度

解决思路：

json对象新建一个属性，并循环赋值1、2、3……

json对象新建一个属性： json.newParam="index";

给新建的属性赋值：json.index="1";

实现办法：

 var self =this;
      var i=1;
      self.detailstableData=[];
      self.xmlbData.map(item =>{
          item.newParam='index';
          item.index=i++;
          self.detailstableData.push(item);
      });
//xmlbData是待遍历的数组

4.2 分页显示，添加一列序号，但是每页的序号都是从1、2、3……到每页显示的总条数

解决思路：

每一页都动态计算下

实现方式：

<el-table-column
    fixed＝"left" 
    label="序号"
    type="index"
    width="50"
    align="center">
    <template scope="scope">
        {{ scope.$index + (pageNumber - 1) * pageSize + 1 }}
    </template>
</el-table-column>

// scope.$index 当前序号
// pageNumber 当前页码　（1）
// pageSize 一页显示多少条　（10）

---

五、获取当前鼠标点击的元素的属性内容，区分鼠标点击的是哪个HTML元素

应用场景：

比如很多个button，指向同一个函数点击事件，怎么自动区分出点击的是哪个button

解决思路：

根据event.target来获取目标

实现方式：

<el-button id="button" @click="handleclick"> 全省</el-button>
<el-button id="button2" @click="handleclick"> 全国</el-button>

handleclick(evt){
  alert(evt.target.innerText);
}

结果：

 

---

六、el-table获取点击click选中行的值

应用场景：点击el-table的每一行，响应时间，操作行有关的值。

如何使用：利用el-table的row-click事件。

使用流程：

1、template标签中，绑定row-click事件，注意不要传参，这个事件自带了参数，传参就不能正常使用了

<el-table
                :data="zrzData"
                style="width: 100%"
                highlight-current-row	
                @row-click="searchListClick">    //这里的方法不用带参数
                
            </el-table>

2、方法实现过程中，带好参数

 searchListClick(row){
//参数row就是鼠标点击的行
}

七、V-for渲染时候（比如table、li等），点击当前行，获得当前行数据，以及event当前事件对象

template标签中：

<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in arrData"
        :key="index"
        @click="operate(item, $event)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

八、设置部分动态样式，部分固定样式

应用场景：HTML元素某个样式属性需要整动态的，其他的都是固定值。

<div :style="{background:'rgb('+myVar+')'}" style="width:20px;height:20px"></div>

//定义两个style，一个放固定属性，一个放动态的，注意所有的东西都是拼接出来的，比如rgb，不能直接写background：rgb(myvar),需要拼接成这种形式

注意：

1、带'-'的样式属性

<!-- style 绑定 -->
<div :style="{ 'min-height': size + 'px' }"></div> // 通过

<!-- style 绑定 -->
<div :style="{ min-height: size + 'px' }"></div> // 编译不通过