Element-UI使用与爬坑集合

深碍√TFBOYSˉ_ 2021-07-24 15:30 540阅读 0赞

**目录**

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）与当前路由页面不一致 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

**解决思路：给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条记录
            }
        }
    }

**实现效果：**

![20191113152512499.png][]

--------------------

## 四、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);
    }

**结果：**

![20191206113132578.png][]

--------------------

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

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

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

![20200331152546175.png][]

使用流程：

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、带'-'的样式属性

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/4332be8ebea14a62959bf72dc0eb2226.png
[20191113152512499.png]: /images/20210724/3aef873f382145ce9587994fe41512fe.png
[20191206113132578.png]: /images/20210724/a674a1cb58854fcd9e40c6f60a44f201.png
[20200331152546175.png]: /images/20210724/2e168240216a4fc1b9735d828b5d38c8.png