Inicio>código fuente PHP>Otras categorias
Descargar

vue-ele-table | Encapsulación secundaria de tabla basada en element-ui

ilustrar

vue-ele-table es una encapsulación adicional basada en la tabla element-ui y vue-ele-editable. Tiene funciones integradas搜索、排序、筛选、过滤、分页、显示隐藏列、行内编辑. tiene como objetivo garantizar la calidad del desarrollo, acelerar el desarrollo?.

️ Sin embargo, dado que el diseño de la interfaz varía mucho de un proyecto a otro, originalmente quería hacer que este componente fuera más versátil y adaptable, pero descubrí que cuanto más lo cambiaba, más complicada se volvía la operación, lo que iba en contra de mi intención original. Entonces, si desea aplicarlo a su propio proyecto, una forma es consultar las especificaciones de diseño de API de este proyecto y la otra es clonarlo/descargarlo y colocarlo en su propio proyecto para modificarlo. tienes buenas sugerencias, incluso si planteas un problema, te responderemos lo antes posible (PD: los comentarios del código de este proyecto son bastante detallados, creo que puedes entenderlos)

Si la estrella supera las 100, hay un vídeo con una explicación detallada del código fuente.

Manifestación

Diagrama de demostración

Ejemplo en línea

https://codepen.io/dream2023/pen/agwMpY

Instalar 

npm install vue-ele-table --save

usar 

 import EleTable from 'vue-ele-table'
Vue . use ( EleTable )

// 在引入 EleTable 时，可以传入一个全局配置对象, 例如:
Vue . use ( EleTable , {
  // 每页显示的数量
  defaultSize : 10 ,
  // 用于改变请求的key,
  // 例如: 原 { page: 1, size: 20  }, 经过下面设置后, 就会变为: { page: 1, per_page: 20 }
  paramsKey : {
    size : 'per_page'
  } ,
  // editable 相关的配置, 具体参考:
  // https://github.com/dream2023/vue-ele-editable
  editable : {
    image : {
      lazy : true
    }
    // ...
  }
} )

especificación API

Formato de datos de retorno 

 {
  "total" : Number , // 总条数
  "list" : Array // 数据列表
} ,
// 或者 直接数组
[
  { } ,
  { }
]


// 例如:
// 默认分页
{
  "total" : 300 ,
  "list" : [
    { id : 1 , age : 19 , name : '张三' } ,
    { id : 2 , age : 33 , name : '李四' } ,
    { id : 3 , age : 22 , name : '王五' } ,
  ]
}

// 直接返回数组, 则表明无需分页
[
  { id : 1 , age : 19 , name : '张三' } ,
  { id : 2 , age : 33 , name : '李四' } ,
  { id : 3 , age : 22 , name : '王五' } ,
]

Control de paginación 

 {
  "page" : Number , // 页码, 默认为 1
  "size" : Number , // 每页显示条数，默认值 20
} ,

// 例如:
// 也就是 当前是 第2页, 每页显示 30 条
{
  "page" : 2 ,
  "size" : 30
}

Control de secuenciación 

 // 请求参数
{
  "_order_field" : String , // 排序字段名
  "_order_direction" : "asc" || "desc" , // 正序 或 倒序
} ,

// 例如:
// 含义: 排序字段是 id, 正序 asc
{
  "_order_field" : 'id' ,
  "_order_direction" : "asc"
}

Control de filtro 

 {
  "_filter" : String , // 支持多筛选, 用 | 分割不同字段, 用 : 分割值和字段, 用 , 分割值

  // 例如:
  // 含义: (type=1 或 type = 2 或 type=3) 且 name = 'abc'
  "_filter" : "type:1,2,3|name:abc"
}

Control de filtro de tiempo 

 {
  "_filter_time" : String , // 分割原理同上

  // 例如:
  // 含义: (create_time > 12121212 且 create_time < 13131313) 且 (update_time > 14141414 且 update_time < 15151515)
  "_filter_time" = "create_time:12121212,13131313|update_time:14141414,15151515" ,
}

Control de búsqueda 

 {
  "_search_field" : "字段|字段|字段" ,
  "_search_keyword" : "搜索内容"
} � ,

// 例如:
// 含义: (name 或者 title 或者 article) 包含 学习vue 的记录
{
  "_search_field" : "name|title|article" ,
  "_search_keyword" : "学习vue"
}

Parámetro de accesorios 

props: {
  // 是否显示顶部删除按钮
  isShowTopDelete : {
    type : Boolean ,
    default : true
  } ,
  // 是否显示右侧删除按钮
  isShowRightDelete : {
    type : Boolean ,
    default : true
  } ,
  // 是否显示多选框
  isShowSelection : {
    type : Boolean ,
    default : true
  } ,
  // 是否显示index列
  isShowIndex : {
    type : Boolean ,
    default : true
  } ,
  // 是否显示分页
  isShowPagination : {
    type : Boolean ,
    default : true
  } ,
  // 主键
  // 用途: 删除, 更新等按钮操作
  primaryKey : {
    type : String ,
    default : 'id'
  } ,
  // 请求函数
  // 用途: 所有请求都有内部完成, 所以需要一个请求函数, 改函数的返回值必须是一个Promise实例
  requestFn : {
    type : Function ,
    required : true
  } ,
  // 更新函数
  // 用途: 用于行内编辑时, 更新数据, 具体参考: https://github.com/dream2023/vue-ele-editable
  updateFn : Function ,
  // 批量删除函数
  deletesFn : Function ,
  // 删除函数
  deleteFn : Function ,
  // 表格描述, 下面会详细论述
  tableDesc : {
    type : Object ,
    default ( ) {
      return { }
    }
  } ,
  // 列描述, 下面会详细论述
  columnsDesc : {
    type : Object ,
    required : true
  } ,
  // 顶部按钮, 下面会详细论述
  topButtons : Array ,
  // 顶部时间过滤字段
  // 这个比较简单, 只需要传递字段就行了, 例如 ['create_time', 'update_time'] 或者 'create_time'
  topTime : [ String , Array ] ,
  // 顶部搜索字段, 下面会详细论述
  topSearch : [ Object , Array ] ,
  // 右侧按钮, 下面会详细论述
  rightButtons : {
    type : Array ,
    default ( ) {
      return [ ]
    }
  }
}

columnasDesc 

 <!-- 伪代码, 帮助理解 -->
< el-table-column
  v-for =" (column, field) of columnsDesc "
  :key =" field "
  :filters =" column.options "
  :label =" column.text "
  :sortable =" column.sortable === true ? 'custom' : column.sortable "
  :width =" column.width "
  v-bind =" column.columnAttrs "
>
  < ele-editable
    :customAttrs =" column.componentAttrs "
    :customData =" {
      [primaryKey]: scope.row[primaryKey]
    } "
    :defaultValue =" column.defaultValue "
    :displayFormatter =" column.displayFormatter "
    :emptyText =" column.emptyText "
    :field =" field "
    :inline =" column.inline "
    :isNoWrapper =" column.isNoWrapper "
    :options =" column.options "
    :request-fn =" updateFn "
    :rules =" column.rules "
    :title =" column.titleField ? scope.row[column.titleField] : column.text "
    :type =" column.type "
    :valueFormatter =" column.valueFormatter "
    v-model =" scope.row[field] "
  />
</ el-table-column > 
columnsDesc: {
  // 字段
  status : {
    text : '状态' , // 表头名字
    sortable : true , // 该列是否需要排序,
    width : 100 , // 列宽
    options : [ // 用于筛选
      { text : '正常' , value : true } , // text 用来显示, value 是 text 对应的值
      { text : '禁用' , value : false }
    ] ,
    columnAttrs : { // 其他关于 column 的属性, 都使用 columnAttrs
      resizable : false , // 禁止拖动
    } ,

    // 下面的是关于 editable 相关的属性
    // https://github.com/dream2023/vue-ele-editable
    type : 'status' , // 指定 列 显示的类型,
    defaultValue : 1 , // 默认值,
    // ...
  } ,
  name : {
    type : 'input' ,
    text : '姓名'
  } ,
  // ...
}

tablaDesc 

 <!-- 伪代码 -->
< el-table
  :class =" tableDesc.class "
  :style =" tableDesc.style "
  v-bind =" tableDesc.attrs "
  v-on =" tableDesc.on "
> </ el-table > 
tableDesc: {
  class : { } ,  // 添加的类
  style : { } , // 添加的自定义样式
  attrs : { } , // 添加的自定义属性
  on : { } , // 添加的自定义事件
} 
 // 例子: 指定默认排序字段
tableDesc: {
  attrs : {
    'default-sort' : { prop : 'date' , order : 'descending' }
  }
}

botones superiores 

 {
  primaryKey : 'id' , // 假定主键字段为 id
  topButtons : [
    {
      text : '新增' , // 文字
      attrs : { // btn相关属性
        type : 'success' ,
      } ,
      click : ( ids , rows ) => {
        // 点击事件
        console . log ( ids , rows ) // 传递过来勾选中的列的 主键集合 和 列的集合
      }
    } ,
    {
      // ...
    }
  ]
}

botones derecho 

 {
  primaryKey : 'id' , // 假定主键字段为 id
  rightButtons : [
    {
      text : '编辑' , // 显示的文字
      attrs : { // btn相关属性
        type : 'success' ,
      } ,
      click : ( id , index , row ) => {
        // 点击事件
        console . log ( id , index , row ) // 传递过来 主键值, 行的index值, 和 行值
      }
    }
  ]
}

arribaBuscar 

topSearch: [
  { text : '用户名' , value : 'name' } , // text: 显示在提示框的内容, value: 字段
  { text : '省份' , value : 'address' }
]

Caso integral 

 data ( ) {
  return {
    rightButtons : [
      {
        text : '编辑' ,
        click : ( id , index , data ) => {
          console . log ( id , index , data )
        }
      }
    ] ,
    topButtons : [
      {
        text : '新增' ,
        click : ( ids ) => {
          console . log ( ids )
        }
      } ,
      {
        text : '启用' ,
        attrs : {
          type : 'success'
        } ,
        click : ( ids ) => {
          console . log ( ids )
        }
      } ,
      {
        text : '禁用' ,
        attrs : {
          type : 'warning'
        } ,
        click : ( ids ) => {
          console . log ( ids )
        }
      }
    ] ,
    topTime : 'create_time' ,
    topSearch : [
      { text : '用户名' , value : 'name' } ,
      { text : '省份' , value : 'address' }
    ] ,
    columnsDesc : {
      id : {
        text : 'ID' ,
        sortable : true ,
        width : 80
      } ,
      avatar : {
        text : '头像' ,
        type : 'image'
      } ,
      name : {
        text : '名字' ,
        type : 'input'
      } ,
      type : {
        text : '类型' ,
        options : [ 'VIP1' , 'VIP2' , 'VIP3' , 'SVIP' ]
      } ,
      address : {
        text : '省份'
      } ,
      birthday : {
        text : '出生日期'
      } ,
      status : {
        text : '状态' ,
        type : 'status' ,
        width : 100 ,
        options : [
          { text : '正常' , type : 'success' , value : 1 } ,
          { text : '禁用' , type : 'danger' , value : 0 }
        ]
      } ,
      create_time : {
        text : '创建时间' ,
        type : 'datetime-text'
      }
    }
  }
}

Enlaces relacionados

  • vue-ele-editable
  • tabla de elementos
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo