lc-vue-grid-layout-wrapper

简单的grid布局组件

安装

npm i lc-vue-grid-layout-wrapper

依赖

• [email protected]

Demo

demo

基本使用

<template>
  <el-form ref='formRef' :model='form' :rules='rules' label-position='top'>
    <GridLayoutWrapper :col='2'>
      <el-form-item label='测试1' prop='value1'>
          <el-input v-model='form.value1'/>
        </el-form-item>
        <el-form-item label='测试2' prop='value2'>
          <el-input v-model='form.value2'/>
        </el-form-item>
        <el-form-item label='测试3' prop='value3'>
          <el-input v-model='form.value3'/>
        </el-form-item>
    </GridLayoutWrapper>
    <el-form-item label='测试3'>
      <el-button @click='onSubmit'>确认</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import { GridLayoutWrapper } from 'lc-vue-grid-layout-wrapper';
  import { reactive, ref } from 'vue';

  const form = reactive({
    value1: '',
    value2: '', 
    value3: ''
  })

  const rules = reactive({
    value1:[
      { required: true, message:'请输入value1' }
    ]
  })

  const formRef = ref();
  const onSubmit = async () => {
    try {
      await formRef.value.validate();
    } catch(e){
      console.log(e)
    }
  }
</script>

Api

FormGrid Props

| 属性名 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | col | grid布局列数 | number | 2 |