PmList 动态列表

支持对数组数据的新增, 编辑, 克隆, 删除, 排序

基础用法

<template>
  <el-form>
    <pm-list :data="data" :model="addAttrs">
      <div slot-scope="{row, index}">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :prop="[index].name">
              <el-input v-model="row.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].gender">
              <pm-select :initData="genders" v-model="row.gender"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].age">
              <el-input-number v-model="row.age"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </pm-list>  
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      genders:[
        {label:'男',value:1},
        {label:'女',value:0},
      ],
      data: [
        {
          name: '姓名',
          gender: '男',
          age: '年龄',
        }
      ],
      addAttrs: {
        name: '',
        gender: '',
        age: 10,
      }
    }
  }
}
</script>

显示代码 复制代码 复制代码

minLength

<template>
  <el-form>
    <pm-list :data="data" :model="addAttrs" :minLength="1">
    <div slot-scope="{row, index}">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :prop="[index].name">
              <el-input v-model="row.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].gender">
              <PmSelect :initData="genders" v-model="row.gender"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].age">
              <el-input-number v-model="row.age"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </pm-list>  
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      genders:[
        {label:'男',value:1},
        {label:'女',value:0},
      ],
      data: [
        {
          name: '姓名',
          gender: '男',
          age: '年龄',
        }
      ],
      addAttrs: {
        name: '',
        gender: '',
        age: 10,
      }
    }
  }
}
</script>

显示代码 复制代码 复制代码

maxLength

<template>
  <el-form>
    <pm-list :data="data" :model="addAttrs" :maxLength="2">
      <div slot-scope="{row, index}">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :prop="[index].name">
              <el-input v-model="row.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].gender">
              <PmSelect :initData="genders" v-model="row.gender"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].age">
              <el-input-number v-model="row.age"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </pm-list>  
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      genders:[
        {label:'男',value:1},
        {label:'女',value:0},
      ],
      data: [
        {
          name: '姓名',
          gender: '男',
          age: '年龄',
        }
      ],
      addAttrs: {
        name: '',
        gender: '',
        age: 10,
      }
    }
  }
}
</script>

显示代码 复制代码 复制代码

removeConfirm

<template>
  <el-form>
    <pm-list :data="data" :model="addAttrs" :removeConfirm="true">
      <div slot-scope="{row, index}">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :prop="[index].name">
              <el-input v-model="row.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].gender">
              <PmSelect :initData="genders" v-model="row.gender"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="[index].age">
              <el-input-number v-model="row.age"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </pm-list>  
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      genders:[
        {label:'男',value:1},
        {label:'女',value:0},
      ],
      data: [
        {
          name: '姓名',
          gender: '男',
          age: '年龄',
        }
      ],
      addAttrs: {
        name: '',
        gender: '',
        age: 10,
      }
    }
  }
}
</script>

显示代码 复制代码 复制代码

Attributes

参数	说明	类型	可选值	默认值
data	list循环用数组	array	-	[]
sortable	是否允许排序	boolean	-	true
cloneable	是否允许克隆	boolean	-	true
minLength	最少保留几条数据	number	-	0
addable	是否可添加	boolean	-	true
maxLength	最大长度，不为0是生效	number	-	0
model	添加用的模版	Object	-	-
addText	添加按钮的文字	string	-	添加
beforeRemove	删除row之前的回调	function	-	null
removeConfirm	使用confirm方式删除	boolean	-	false
removeConfirmText	confirm方式删除的提示文字	string	-	确定要删除吗?
addAttrs	添加按钮的属性	object	-	{ type: 'text' }
createable	是否可清空	boolean	-	true
addClass	添加按钮的类名	object	-	{ 'text-right': true }
removeStyle	删除按钮的样式	string	-	-
size	删除按钮的尺寸	medium / small / mini	-	-