vue free table

mesa sin vue

Basado en el segundo embalaje de la tabla de interfaz de usuario de elementos, casi admite todas las funciones de la tabla original

Documentación

Vista previa de Premo

característica

• Basado en la tabla Element-UI, se realiza un segundo empaque para reducir el número de código
• Parámetros y eventos que heredan el componente de la tabla Element-UI
• Apoyo de representación
• Ranura de la ranura de soporte
• Introducción al componente de soporte
• Apoyo los datos de los árboles
• Función de Paging de soporte

documento

propiedad	ilustrar	tipo	por defecto
data	Atributo data de la tabla	Array	[]
column	Se utiliza para controlar las columnas de la tabla	Array	[]
columns-props	Se utiliza para definir los atributos de toda column pública	Object
pagination	Si debe mostrar un componente de paginación, consulte la columna pagination配置en detalle en detalle	Boolean	false

Es solo una capa de encapsulación en la tabla de elementos.

La columna de configuración de Columbal se usa para controlar el comportamiento de la columna del formulario.

 const column = [
  { label : '日期' , prop : 'date' , width : 100 } ,
  { label : '姓名' , prop : 'name' } ,
  { label : '邮编' , prop : 'zip' } ,
  {
    label : '地址' ,
    prop : 'address' ,
    render : ( h , scope ) => {
      return ( < el-tag > { scope . row . address } < el-tag > )
    }
  } ,
  {
    label : '组件' ,
    prop : 'cmp' ,
    component : EditBtn ,
    listeners : {
      'row-edit' ( row ) {
        console . log ( 'row-edit' , row )
      }
    }
  }
]

Columns-Props está configurado con Columns-Props para configurar el atributo de accesorios predeterminado de cada columna de columnas,

 const columnsProps = {
  align : 'left' ,
  minWidth : 120
}

Pagination Configuration Pagination se utiliza para controlar el componente de paginación mostrado.

parámetro	ilustrar	tipo	valor predeterminado
total	Número de entrada total	Number	/ /
page	Soporte de número de página actual .sync	Number	1
limit	Muestra el número de entradas por página, soporte .sync	Number	20
page-sizes	La configuración de opción del selector de números cada página	Number[]	[10, 20, 30, 50]
hidden	Si esconderse	Boolean	false
auto-scroll	Si se enrolla automáticamente a la parte superior después de la paginación	Boolean	true

También es compatible con el soporte El-Pagination de otros elementos. Vea el documento para más detalles

Ejemplar

 < template >
  < free-table border stripe : data = "data" : column = "column" > </ free-table >
</ template >

< script >
import FreeTable from '@/components/FreeTable'

export default {
  components : {
    FreeTable
  } ,
  data ( ) {
    return {
      column : [
        { label : '日期' , prop : 'date' } ,
        { label : '姓名' , prop : 'name' } ,
        { label : '省份' , prop : 'province' } ,
        { label : '市区' , prop : 'city' } ,
        { label : '地址' , prop : 'address' }
      ] ,
      data : [
        {
          date : '2016-05-03' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        } ,
        {
          date : '2016-05-02' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
< / script>

Construir comandos

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint