@achance/element-ui-advance v1.0.9

饿了么组件的二次开发

安装

npm i @achance/element-ui-advance

引入

import '@achance/element-ui-advance'

表单

<template>
  <div class='formPage'>
    <ac-form :form-config="form" v-model="hehe" ref="form-preview">
      你也可以自己写一点东西放在下面
    </ac-form>

  </div>
</template>
<script>
export default {
  name: 'formPage',
  data() {
    return {
      form: {
        'inline': false,
        'labelPosition': 'right',
        'labelWidth': '120px',
        'size': 'small',
        'statusIcon': true,
        'formItemList': [
          {
            'type': 'input',
            'label': '商品名称',
            'disabled': false,
            'readonly': false,
            'value': '',
            'placeholder': '请输入',
            'rules': [
              {
                'required': true,
                'message': '不能为空',
                'trigger': 'blur'
              },
              {
                'min': 1,
                'max': 8,
                'type': 'string',
                'message': '长度在1~8个字符',
                'trigger': 'blur'
              },
              {
                'pattern': '^[\\w\\u4e00-\\u9fa5-_]+$',
                'message': '正则验证失败:^[\\w\\u4e00-\\u9fa5-_]+$',
                'trigger': 'blur'
              },
              {
                'sql': 'SELECT {key} FROM balabala',
                'message': 'SQL验证失败',
                'trigger': 'blur'
              }
            ],
            'key': 'name',
            'subtype': 'text'
          },
          {
            'type': 'number',
            'label': '价格',
            'value': 16,
            'decimal1': 2,
            'min': 0,
            'max': 99998,
            'prepend': '￥',
            'append': '元',
            'key': 'price'
          },
          {
            'type': 'select',
            'label': '小菜',
            'value': '1',
            'disabled': false,
            'multiple': false,
            'placeholder': '请选择',
            'rules': [],
            'key': 'dish',
            'options': [
              {
                'value': '1',
                'label': '海带',
                'disabled': false
              },
              {
                'value': '2',
                'label': '萝卜',
                'disabled': false
              },
              {
                'value': '3',
                'label': '咸菜',
                'disabled': false
              }
            ]
          },
          {
            'type': 'switch',
            'label': '是否配送',
            'appearance': 'switch',
            'value': true,
            'key': 'delivery'
          },
          {
            'type': 'radio',
            'label': '是否需要打包盒',
            'value': '1',
            'button': false,
            'border': true,
            'rules': [
              {
                'required': true,
                'message': '请选择一项',
                'trigger': 'blur'
              }
            ],
            'key': 'box',
            'options': [
              {
                'value': '1',
                'label': '无',
                'disabled': false
              },
              {
                'value': '2',
                'label': '有',
                'disabled': false
              }
            ]
          },
          {
            'type': 'input',
            'label': '备注',
            'value': '',
            'key': 'remark',
            'subtype': 'textarea'
          },
          {
            'type': 'date',
            'value': [
              '2023-03-01',
              '2023-03-03'
            ],
            'disabled': false,
            'rules': [
              {
                'required': 'true',
                'message': '此项为必填项'
              }
            ],
            'placeholder': '请选择',
            'key': 'date',
            'subtype': 'daterange',
            'label': '配送日期',
            'valueFormat': 'yyyy-MM-dd'
          }
        ]
      },
      hehe: {
        name: '香辣鸡腿堡',
        price: 22,
        dish: '1',
        delivery: true,
        box: 1,
        remark: '微辣',
        date: ['2023-03-01', '2023-03-03']
      }
    }
  },
  methods: {},
  mounted() { }
}
</script>
<style lang='less' scoped>
.formPage {
}
</style>

表格

<template>
  <div class='HelloWorld'>
    <ac-table :headList="headList" :tableData="tableData" :PageIndex="PageIndex" :PageSize="PageSize" :total="total"
      class="table" @rowClick="rowClick" @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange">
      <!-- 操作插槽 -->
      <template #operation="{row}">
        <el-button @click="handleClick(row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
      <!-- 其它插槽，slot为true的列 -->
      <template #address="{row}">
        <div style="color:skyblue;">{{ row.address }}</div>
      </template>
    </ac-table>
  </div>
</template>
<script>

export default {
  name: 'HelloWorld',
  data() {
    return {
      headList: [
        {
          prop: 'date',
          label: '日期',
          formatDate: true
        },
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'address',
          label: '地址',
          slot: true // 自定义列
        },
        // 不想要操作栏可以注释掉这一行
        { prop: 'operation', label: '操作', width: '250', slot: true, fixed: 'right' }
      ],
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
      ],
      PageIndex: 1,
      PageSize: 10,
      total: 4
    }
  },
  methods: {
    rowClick() { },
    handleSizeChange(val) {
      this.PageSize = val
      this.PageIndex = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.PageIndex = val
      this.getData()
    },
    handleClick() { }
  },
  mounted() { }
}
</script>
<style lang='less' scoped>
.HelloWorld {
}
</style>