mill-element-component

AutoTable

tableMeta: [
  {
    prop: "date",
    label: "出生日期",
    width: "180"
  }, {
    prop: "name",
    label: "姓名",
    width: "180"

  }, {
    prop: "address",
    label: "地址",
  }
]

data

tableData: [{
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    id: 5,
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    id: 6,
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄',
    children: [
      {
        id: 7,
        date: '2016-05-32',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }
    ]
  }, {
    id: 8,
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }]

AutoForm

formMeta: {
  items: [
    {
      label: "明星们",
      name: "girls",
      type: "array",
      describe: "举办活动的名称",
      default: ["manyu", "shuzhen"],
      options: [
        { label: "朱茵", value: "zhuyin" },
        { label: "张曼玉", value: "manyu" },
        { label: "邱淑贞", value: "shuzhen" },
        { label: "梅超风", value: "chaofeng" },
        { label: "赵敏", value: "zhaomin" }

      ],
      rules: [
        { required: true, message: "活动名称必须填写" }
      ]
    },
    {
      label: "活动名称",
      name: "activitName",
      type: "string",
      describe: "举办活动的名称",
      default: "营销活动",
      rules: [
        { required: true, message: "活动名称必须填写" },

      ]
    },
    {
      label: "是否影帝",
      name: "isJitou",
      type: "boolean",
      describe: "举办活动的名称",
      default: true,
      rules: [
        { required: true, message: "活动名称必须填写" },

      ]
    }, {
      label: "获奖数量",
      name: "jiCnt",
      type: "number",
      describe: "举办活动的名称",
      default: 50,
      rules: [
        { required: true, message: "活动名称必须填写" },
        { type:"number", min: 20, max: 80 ,message:"怎么说话的"}
      ]
    },
    {
      label: "活动内容",
      name: "activitContent",
      type: "string",
      describe: "举办活动的内容",
      require: true,
      default: "营销活动",
      rules: [
        { max: 30, min: 10, message: "必须在10～30个字符以内" }
      ]
    }, {
      label: "城市",
      name: "city",
      type: "menu",
      describe: "活动举办的城市",
      default: "shengzhen",
      options: [
        { label: "北京", value: "beijing" },
        { label: "上海", value: "shanghai" },
        { label: "深圳", value: "shengzhen" },
        { label: "广州", value: "guangzhou" },
      ],
      rules: [
        { required: true, message: "活动名称必须填写" }
      ]
    }
  ]
},

需要完善

• 批量删除
• 分页
• 表格中树的级别管理

<template>
<el-tabs class="form-table-tabs" v-model="activeName">
    <el-tab-pane label="" name="first">
      <el-table size="mini" :data="value" style="width: 100%">
        <el-table-column v-for="(col,i) in tableMeta" :key="i" :prop="col.name" :label="col.label" > </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="70">
          <template slot-scope="scope">
            <el-button-group>
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleClick(scope)">
            <el-button slot="reference"  type="text" size="mini" icon="el-icon-delete"></el-button>
              </el-popconfirm>
            <el-button type="text" size="mini" icon="el-icon-edit" @click="goEdit(scope)"></el-button>
            
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
        <el-button type="text" size="mini" icon="el-icon-plus" @click="activeName='second'"></el-button>
        </el-tab-pane>
        <el-tab-pane label="" :disabled="disabledForm" name="second">
          <auto-form ref="autoForm" size="mini" @form-confirm="addConfirmHandle" @form-cancle="activeName = 'first'" :formMeta="formMeta"></auto-form>
        </el-tab-pane>
        <el-tab-pane label="" :disabled="disabledForm" name="threed">
          <auto-form ref="editForm" :formData="editRow" size="mini" @form-confirm="editConfirmHandle" @form-cancle="activeName = 'first'" :formMeta="formMeta"></auto-form>
        </el-tab-pane>
</el-tabs>
</template>
<script>

function deepClone(data){
      return JSON.parse(JSON.stringify(data))
    }
export default {
  props: {
    value: {
     
    },
    formMeta: {
      required: true
    }
   
  },
  data(){
    return {
      disabledForm: true,
      activeName: "first",
      editIndex: -1,
      editRow: {}
      
    }
  },
  computed:{
    tableMeta(){
      return this.formMeta.items.filter(e=>e.isCol)
    }
  },
  methods:{
    
    handleClick(row){
      this.value.splice(row.$index,1)
      this.$emit("input",this.value)
    },
    addConfirmHandle(data){
      this.value.push(deepClone(data))
      this.$refs.autoForm.onReset()
    },
    editConfirmHandle(data){
      this.value.splice(this.editIndex,1,deepClone(data))
      this.$refs.editForm.onReset()
    },
    goEdit({$index,row}){
      this.activeName='threed';
      this.editIndex = $index ;
      this.$set(this,'editRow',deepClone(row))
    }
  }
};
</script>

onReset(){
      this.$refs.form.resetFields()
      this.$emit("form-cancle", this.formData)
    }

 FormitemTable(v-model="form.tb",:formMeta="formMeta")


formMeta: {
        items: [
          {
            label: "日期",
            name: "date",
            type: "string",
            describe: "举办活动的内容",
            require: true,
            default: "营销活动",
            isCol: true,
            rules: [
              { max: 30, min: 10, message: "必须在10～30个字符以内" }
            ]
          }, {
            label: "姓名",
            name: "name",
            type: "string",
            describe: "举办活动的内容",
            require: true,
            default: "营销活动",
            isCol: true,
            rules: [
              { max: 30, min: 10, message: "必须在10～30个字符以内" }
            ]
          }, 
          
        ]
      },
      form: {
        tb: [
          {
            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 弄",
          },
        ],
      },