yifang-vue v0.0.2

yifang-vue

Project setup

npm install yifang-vue

使用文档

温馨提示：使用的时候需要配合ElementUi库来进行使用

https://element.eleme.cn/#/

一、fd-form组件

1.整体的参数

2.datas参数

​ (2.1表)

3.使用文档

事件函数： submit

<fd-from :datas="datas" @submit="onSubmit"></fd-from>

onSubmit(data, valid) {
  // 接受两个参数：
  // data: 返回的formdata值 类型：Object
  // valid: 校验值 类型： Booler
 }

二、table组件

1.table整体参数：

2.options参数：

3.使用文档

使用插槽的时候

通过 v-slot:name = { scope } 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

<fd-Table :tableData="tables" :options="config">
        <template v-slot:name="{ scope }">{{ scope.row.name }}</template>
</fd-Table>

三、fd-main组件

直接传递以上配置选项即可渲染

<template>
  <div>
    <fd-main
      :datas="formDatas"
      @submit="onSubmit"
      :tableData="tables"
      :options="config"
      :total="12"
      @change="handleChange"
    ></fd-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // form
      formDatas: [{
        title: '表单名称',
        key: 'username',
        type: 'input',
        defaultValue: '123',
        contentWidth: 100,
        isRequired: true,
      },
      {
        // select 
        title: '选择器',
        key: "value",
        type: 'select',
        isRequired: true,
        options: [
          {
            label: 'haha2',
            value: '这是帝都',
          },
        ]
      },
      {
        title: '库区',
        key: 'daate',
        type: 'datepicker',
        defaultValue: '库区'
      },
      {
        title: '执行人',
        key: 'code',
        type: 'input',
        defaultValue: '执行人',
        rule: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        // isRequired: true,
      }
      ],
      // table: [],
      tables: [
        { date: 1607265511, name: '一方', address: '广州' },
        { date: 1607265510, name: '星宇', address: '广州' },
        { date: 1607265511856, name: '前端', address: 'fordeal' },
      ],
      // 列表配置项
      config: [
        { key: 'date', title: '时间', props: { width: '180' }, format: true },
        { key: 'name', title: '姓名', slot: 'name' },
        { key: 'address', title: '地区', },
        {
          title: '操作', render: (_, { row }) =>
            <div>
              <el-button onClick={() => this.onUpdate(row)}>复制</el-button>
              <el-button type="primary" onClick={() => this.onUpdate(row)}>粘贴</el-button>
            </div>
        },
      ],

    }
  },
  methods: {
    onSubmit(data, valid) {
      console.log(data);
      console.log(valid);
    },
    onUpdate(row) {
      console.log(row);
    },
    handleChange(page) {
      console.log(page)
    }
  }
};
</script>

Dome图：https://s3.ax1x.com/2020/12/09/r9cBYn.jpg