# vue_components

**Repository Path**: pickle_code/vue_components

## Basic Information

- **Project Name**: vue_components
- **Description**: 公司项目中类似的模块，封装一下组件~~
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-12
- **Last Updated**: 2021-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_components

#### 介绍
公司项目中类似的模块，封装一下组件~~

1. ui组件使用的element-ui
2. vue版本2.x



#### 组件目录

页面级组件：`/src/components`

---

#### 页面级组件

#### 1、表格

后端管理系统中存在大量的列表

如：

[![fdyaZQ.png](https://z3.ax1x.com/2021/08/12/fdyaZQ.png)](https://imgtu.com/i/fdyaZQ)

通过把列表封装成组件来减少代码量，方便后期维护。

代码位置：`scr/components/table.vue`

**使用方法：**

1.引入

```js
import tTable from './components/table'
```

2.注册组件

```js
export default {
    components: {
        tTable
    }
}
```

3.页面使用

```html
<t-table :props="props" :tableData="tableData">
```

**参数**

必填参数

| 属性              | 功能             |
| ----------------- | ---------------- |
| props（必填）     | 控制表头显示     |
| tableData（必填） | 列表显示         |
| border            | 表格边框         |
| selection         | 是否显示多选框   |
| @selection-change | 多选框的触发事件 |

**插槽**

通过使用插槽灵活配置`操作栏`

如：   

```html
 <template v-slot="row">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(row)"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleDetail(row)"
        >详情</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(row)"
        >删除</el-button>
 </template>
```

如获取列表的数据需要使用对象的结构

```js
// methods 为 vue 中的 methods
methods: {
    // 详情
    handleDetail ({ row }) {
      alert(row.id)
    },
    
    // 编辑
    handleUpdate ({ row }) {
      alert(row.id)
    },

    // 删除
    handleDelete ({ row }) {
      alert(row.id)
    },

    // 多选
    handleChange(val) {
      console.log(val)
    },

    // 查询
    handleQuery(val) {
      console.log(val)
    }
}
```

#### 2.搜索区域
#### 3.分页组件

| 属性              | 功能             |
| ----------------- | ---------------- |
| total（必填）     | 总页数    |
| page（必填） | 其中包括pageNum-页码，pageSize-每页显示条数        |
| handleQuery（事件必填） |    当页码和每页显示条数改变时调用此方法   |