# v2-base-ui

**Repository Path**: my-project---components/v2-base-ui

## Basic Information

- **Project Name**: v2-base-ui
- **Description**: vue2 element-ui 基础组件封装
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2022-01-14
- **Last Updated**: 2025-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# v2-base-ui

基于 vue2 , element-ui 封装的一些通用的组件（表格，表单和弹窗），使用场景表格查询，表单编辑提交等。重复的表格页面和表单功能，只用写配置文件就行了。（组件具体使用的 deme，目录 src/main/demo，下载项目直接运行就可看到效果）

# install

```
yarn add v2-base-ui
```
// 或者

```
npm install v2-base-ui
```

# introduce

## 完整引入

```
import baseui from 'v2-base-ui';

Vue.use(baseui);

```

## 全局默认配置

```
// 全局配置可以减少很多重复的代码，统一规范

// 组件内置的全局基础配置
export const BASECONFIG = {
  // 查询默认length
  searchMaxlength: 50,
  // 表单默认length
  formMaxlength: 50,
  // 表单文本框默认length
  textareaMaxlength: 200,
  // 数据为空时默认占位符号
  emptyStr: "-",
  // table props 配置 ，默认了表单头部背景色
  tableProps: {},
  // 查询form的props
  searchProps: { inline: true, labelPosition: "right", labelWidth: "120px" },
  // 查询组件默认样式
  searchStyle: { width: "100%" },
  // 表单组件默认样式
  formStyle: { width: "400px", labelWidth: "120px" },
  // 分页默认样式
  pageStyle: { justifyContent: "flex-end" },
  // 默认字体大小
  defaultFontSize: "",
};

// 上面是组件内默认的配置如果需要重新定义可以使用配置项重新定义

Vue.use(baseui,opt);  // opt就是一个对象 {searchMaxlength: 100} 你可以重新自定义上面默认的配置项


```

## 局部引入

```
import { BaseTable,BaseForm,BaseDialog,BaseSearch,reset,copyField } from "v2-base-ui";

```

# 如何使用

先定义列表的配置文件 tableConfig

```
export const tableConfig = {
  propList: [
    { type: "selection", width: "60" },
    { prop: "name", prop2:"userNo", label: "姓名/工号" },
    { prop: "age", label: "年龄" },
    { prop: "phone", label: "手机" },
    {
      prop: "sex",
      label: "性别",
      options: [
        { value: 1, label: "男" },
        { value: 2, label: "女" },
      ],
      // 数组或者对象，然后会根据value值自动去匹配
      // options: {
      //   1: "男",
      //   2: "女",
      // },
    },
    { prop: "address", label: "地址", slotName: "address" },
    { label: "操作", width: "220", slotName: "handler", fixed: "right" },
  ],
};

```

定义查询条件的配置文件 queryConfig

```
export const queryConfig = {
  formItems: [
    {
      field: "name",
      type: "input",
      label: "姓名",
    },
    {
      field: "age",
      type: "input",
      label: "年龄",
    },
    {
      field: "phone",
      type: "input",
      label: "手机号",
    },
    {
      startField:'startDate',
      endField:'endDate',
      type: "datePicker",
      label: "时间范围",
      itemProps: {
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
        type: "daterange",
        format: "yyyy-MM-dd",
        valueFormat: "yyyy-MM-dd",
      },
    },
  ],
};

```

页面

```
<template>
  <div>
    <!-- 查询 -->
    <BaseSearch
      ref="BaseSearch"
      v-bind.sync="queryConfig"
      :query-form.sync="queryForm"
      @getList="getList"
    >
    </BaseSearch>
    <!-- 表格 -->
    <BaseTable
      v-bind="tableConfig"
      :table-data="tableData"
      :total="total"
      :page.sync="page"
      @getList="getList"
    >
    </BaseTable>
  </div>
</template>

<script>
import { tableConfig } from "./config/table.config";
import { queryConfig } from "./config/search.config";

// 接口返回的表格数据
const tableData = {
  code: 200,
  data: {
    total: 2,
    records: [
      {
        name: "张三",
        userNo: "U123456",
        age: "16",
        phone: "13822002211",
        sex: 1,
        address: "四川成都",
      },
      {
        name: "李四",
        userNo: "U123456",
        age: "18",
        phone: "18200000000",
        sex: 2,
        address: "",
      },
    ],
  },
};

// 模拟真实接口，返回数据
const getUser = (args) => {
    return new Promise((resolve, reject) => {
      if (args.currentPage === 1) {
        resolve(tableData);
      } else {
        reject("第二页没有数据");
      }
    });
};

export default {
  name: "demo",
  data() {
    const tb = {
      tableData: [],
      page: { currentPage: 1, pageSize: 10 },
      total: 0,
      loading: false,
      queryForm: {},
      queryConfig,
      tableConfig,
    };
    return {
      // 表格
      ...tb,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 数据查询
    getList() {
      getUser(this.page).then((res) => {
        this.tableData = res.data.records || [];
        this.total = Number(res.data.total || 0);
     })
    },
  },
};
</script>

```

- 就这么简单，一个标准的查询表单就出来了，后面有表格就只用增删配置项，解放双手。
- 然后还有一些表单组件和弹窗具体使用方法可以看我写的 demo , 所在文件目录 src/main/demo ，直接下载项目运行就能看到效果
- ps 组件持续迭代中

# gitee

https://gitee.com/my-project---components/v2-base-ui