Xs-table-view NPM

代码如下（示例）：
在main.js 里面引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import xsTableView from 'xs-tableView'
// 全局注册就可以了，不用局部引入
Vue.use(ElementUI)
Vue.use(xsTableView )

二、基础使用

1.简单配置

获得一个基础表格

<template>
   <xs-table-view :table-list="tableList" :request="requset"></xs-table-view >
</template>
 
<script>
// 这里引入你的接口
import { testApi } from './api'
export default {
  name: 'AppIndex',
  data() {
    return {
      requset: {
        getTableList: params => {
           //params是搜索的参数
          return testApi({ ...params }).then(res => {
            // 返回一个数组
            return res.data
          })
        }
      },
      //填入接口返回的key,name是表格表头名称
      tableList: [ 
        {
          key: 'id',
          name: '用户id'
        },
        {
          key: 'name',
          name: '用户昵称'
        },
        {
          key: 'text',
          name: '文本'
        },
        {
          key: 'phone',
          name: '操作'
        },
      ]
    }
  }
}
</script>
 
<style scoped>
 
</style>

点击并拖拽以移动

效果预览 :

点击并拖拽以移动编辑

表格基础配置：

属性	参数说明
key	对象中的key 例如const test = {age:18} key就是age
name	表格中表头名称

2.搜索配置

<template>
   <xs-table-view :table-list="tableList" :request="requset"></xs-table-view >
</template>
 
<script>
// 这里引入你的接口
import { testApi } from './api'
export default {
  name: 'AppIndex',
  data() {
    return {
      requset: {
        getTableList: params => {
           //params是搜索的参数
          return testApi({ ...params }).then(res => {
            // 返回一个数组
            return res.data
          })
        }
      },
      //填入接口返回的key,name是表格表头名称
      tableList: [ 
        {
          key: 'id',
          name: '用户id',
          search: {
            // 类型，可以定义 select,input,date
            type: 'select',
            value: '',
            options: {
              // options里面可以配置任何select组件内的属性
              multiple: true,
              style: {}
            },
            events: {
              change: (val) => {console.log(val, '-------click')}
            },
            // select 会需要定义一个list key值不能修改，可以动态传入一个数组变量
            // disabled 是否禁止选择
            list: [
              {
                label: '今天',
                value: '1',
                disabled: true
              },
              {
                label: '明天',
                value: '2'
              }
            ]
          }
        },
        {
          key: 'name',
          name: '用户昵称',
          search: {
            type: 'input',
            // options里可以配置任何input组件的属性
            options: {}
          }
        },
        {
          key: 'text',
          name: '文本'
        },
        {
          key: 'createTime',
          name: '日期',
          // searchKey可以将日期分隔为两个参数，不配置为一个字符串 
          // searchKey: {
          //   startDate: '',
          //   endDate: ''
          // },
          search: {
            type: 'date',
            value: ['2022-12-24', '2022-12-30'],
            // options里可以配置任何dateTimePicker组件的属性
            options: {
              // type: 'datetime'
            }
          }
        },
        {
          key: 'phone',
          name: '操作'
        }
      ]
    }
  }
}
</script>
 
<style scoped>
 
</style>

点击并拖拽以移动

效果预览:

点击并拖拽以移动编辑

搜索配置参数: search 对象

属性	参数说明	默认值	说明
type	搜索的组件类型		可选select、date、inpit
value	组件的默认值		有了默认值第一次搜索会带上这个参数
showSearchName	是否隐藏搜索的文字	false	Boolean
searchName	搜索前面文字	对象中的name
options	对象属性配置		对应element-ui组件内的属性都可以配置有 - 的时候需要加引号，不能缩写。
events	对象事件配置		对应element-ui组件内的事件都可以配置，有-的时候需要打引号''，不能缩写。例如:'visible-change' 不能写成visibleChange

3.按钮配置

<template>
   <xs-table-view :table-list="tableList" :request="requset"></xs-table-view >
</template>
 
<script>
// 这里引入你的接口
import { testApi } from './api'
export default {
  name: 'AppIndex',
  data() {
    return {
      requset: {
        getTableList: params => {
           //params是搜索的参数
          return testApi({ ...params }).then(res => {
            // 返回一个数组
            return res.data
          })
        }
      },
      //填入接口返回的key,name是表格表头名称
      tableList: [ 
        {
          key: 'id',
          name: '用户id',
          search: {
            // 类型，可以定义 select,input,date
            type: 'select',
            value: '',
            options: {
              // options里面可以配置任何select组件内的属性
              multiple: true,
              style: {}
            },
            events: {
              change: (val) => {console.log(val, '-------click')}
            },
            // select 会需要定义一个list key值不能修改，可以动态传入一个数组变量
            // disabled 是否禁止选择
            list: [
              {
                label: '今天',
                value: '1',
                disabled: true
              },
              {
                label: '明天',
                value: '2'
              }
            ]
          }
        },
        {
          key: 'name',
          name: '用户昵称',
          search: {
            type: 'input',
            // options里可以配置任何input组件的属性
            options: {}
          }
        },
        {
          key: 'phone',
          name: '文本',
        },
        {
          key: 'createTime',
          name: '日期',
          // searchKey可以将日期分隔为两个参数，不配置为一个字符串 
          // searchKey: {
          //   startDate: '',
          //   endDate: ''
          // },
          search: {
            type: 'date',
            value: ['2022-12-24', '2022-12-30'],
            // options里可以配置任何dateTimePicker组件的属性
            options: {
              // type: 'datetime'
            }
          }
        },
        {
          name: '操作',
          button: [
            {
              name: '新增',
              type: 'success',
              events: {
                click: (params) => {
                  console.log(params, '点击按钮数据回调')
                }
              },
              hidden: (params) => {
                // params是表格一行对象参数，可以判断这个按钮是否显示。
                return false
              }
            },
            {
              name: '编辑',
              type: 'primary',
              events: {
                click: (params) => {
                  console.log(params, '点击按钮数据回调')
                }
              },
              hidden: (params) => {
                // params是表格一行对象参数，可以判断这个按钮是否显示。
                return false
              }
            }
          ]
        }
      ]
    }
  }
}
</script>
 
<style scoped>
 
</style>

点击并拖拽以移动

效果预览：

点击并拖拽以移动编辑

按钮配置参数：button 数组内配置对象

属性	参数说明	默认值	说明
name	按钮名字
type	按钮颜色	primary	可选primary,success info，warning，danger
options	属性配置	Objec {}	element-uiz中按钮的所有属性都可以进行配置
events	事件配置	Objec {}	click 点击事件 click:（params）=>{}
hidden	是否隐藏按钮	false	params回调参数，可以根据数据判断是否展示返回一个布尔值 Boolean

4、弹窗配置

<template>
  //需要加上ref，列表刷新的时候需要遇到。不刷新表格可以不定义
  <xs-table-view ref="xsTableView" :table-list="tableList" :request="requset"></xs-table-view>
</template>

<script>
// 这里引入你的接口
import { testApi } from '../utils/request'
export default {
  name: 'AppIndex',
  data() {
    return {
      requset: {
        getTableList: params => {
          // params是搜索的参数
          return testApi({ ...params }).then(res => {
            // 返回一个数组
            return res.data
          })
        }
      },
      // 填入接口返回的key,name是表格表头名称
      tableList: [
        {
          key: 'id',
          name: '用户id',
          search: {
            // 类型，可以定义 select,input,date
            type: 'select',
            value: '',
            options: {
              // options里面可以配置任何select组件内的属性
              multiple: true,
              style: {}
            },
            events: {
              change: (val) => {console.log(val, '-------click')}
            },
            // select 会需要定义一个list key值不能修改，可以动态传入一个数组变量
            // disabled 是否禁止选择
            list: [
              {
                label: '今天',
                value: '1',
                disabled: true
              },
              {
                label: '明天',
                value: '2'
              }
            ]
          }
        },
        {
          key: 'name',
          name: '用户昵称',
          search: {
            type: 'input',
            // options里可以配置任何input组件的属性
            options: {}
          }
        },
        {
          key: 'phone',
          name: '文本'
        },
        {
          key: 'createTime',
          name: '日期',
          search: {
            type: 'date',
            value: ['2022-12-24', '2022-12-30'],
            // options里可以配置任何dateTimePicker组件的属性
            options: {
              // type: 'datetime'
            }
          },
          // 多配置了popup
          popup: {
            type: 'date',
            value: ['2022-12-24', '2022-12-30']
          }
        },
        {
          name: '操作',
          width: 200,
          button: [
            {
              name: '新增',
              type: 'success',
              events: {
                click: (params) => {
                  this.$Dialog({
                    tableList: this.tableList,
                    type: 'add',
                    callback: (params, type) => {
                      console.log(params, type + '--' + '弹窗回调----------')
                      this.$Dialog.close()
                      if (type === 'close') {
                        console.log('取消弹窗')
                      }
                    }
                  })
                }
              },
              hidden: (params) => {
                return false
              }
            },
            {
              name: '编辑',
              type: 'primary',
              events: {
                click: (params) => {
                  this.$Dialog({
                    tableList: this.tableList,
                    data: params,
                    type: 'edit',
                    title: '测试title',
                    width: '50%',
                    cancelText: '禁止',
                    confirmText: '启用',
                    callback: (params, type) => {
                      console.log(params, type + '--' + '弹窗回调----------')
                      this.$Dialog.close()
                      if (type === 'confirm') {
                        this.$refs.xsTableView.tableRefresh(() => {
                          console.log('表格刷新回调')
                        })
                      }
                    }
                  })
                }
              },
              hidden: (params) => {
                return false
              }
            }
          ]
        }
      ]
    }
  }
}
</script>

点击并拖拽以移动

效果预览：

点击并拖拽以移动编辑

弹窗参数配置：popup 对象

属性	参数说明	默认值	说明
type	弹窗样式	默认取search的配置，没有search默认是input	可选select，date，input
value	组件默认值	默认取对象key的value
popupShow	是否在弹窗中隐藏	false	Boolean

5、多级表头配置

6、分页配置

7、列隐藏配置

三、插槽

四、表格参数配置

1、xs-table-view 组件需要传递的参数

属性	参数说明	类型	说明
table-list	组件内需要的参数	Array
request	网络请求	Object
tableOptions	表格内定义的参数	Object	见下方tableOptions说明

xs-table-view

<template>
  <div class="content">
    <tableView ref="xsTableView" :table-list="tableList" :request="requset" :table-options="tableOptions">
      <!-- <template #searchHeader>
        <div>
          <span style="color:red;margin-right: 10px;">头部插槽</span>
        </div>
      </template>
      <template #searchMiddle>
        <div>
          <span style="color:red;margin-right: 10px;">中间插槽</span>
        </div>
      </template>
      <template #searchButton>
        <div @click="userAdd">
          <span style="color:red;margin-right: 10px;">新增-按钮插槽</span>
        </div>
      </template>
      <template #searchFooter>
        <div>
          <span style="color:red;margin-right: 10px;">尾部插槽</span>
        </div>
      </template>
      <template #search>
        <div style="display:flex;justify-content:start">
          <el-button type="primary">自定义搜索</el-button>
        </div>
      </template> -->
    </tableView>
  </div>
</template>

点击并拖拽以移动

request配置
request可以配置多个对象，table表格需要的数据，函数key必须为getTableList ，返回一个数组

import { testApi } from './api'
requset: {
    /*
        返回的数据 函数key必须为getTableList
        params是搜索参数，你可以在函数里面操作返回的数据
        每次搜索,翻页，刷新都会触发此函数
    **/
    getTableList: params => {
       console.log(params,'搜索的参数')
       return testApi({ ...params }).then(res => {
         console.log(res, '成功')
         this.tableOptions.pagination.total = res.total
         return res.data
       })
    }
    //下面也可以在继续定义在created里面执行的请求 只会执行一次
    demo:testApi
},

点击并拖拽以移动

表格对象属性配置：tableOptions

组件内将属性透传了下去，所有element - table中的属性和事件都可以配置

column的需要在column中配置，这里是配置table表格的属性和事件

详细的属性和事件，有需要的对着element中做配置

属性	参数说明	默认项	说明
searchShow	是否隐藏顶部搜索组件	false
searchStyle	顶部搜索组件的样式配置
searchButtonName	顶部默认搜索按钮名字配置
pagination	对象配置，pagination：{}里面的属性和element中的pagination属性一样参数有透传，作为第一次参数的默认参数	pagination：{ currentPage：1， pageSize：10 }	中间有-不能缩写需要加上''引号做为key。例如： 'show-header':true
events	函数事件配置		中间有-不能缩写需要加上''引号做为key。例如： 'row-click':()=>{}

表格配置例子：
tableOptions: {
searchShow: false,
searchButtonName: '查询'，
pagination: {
currentPage: 2,
pageSize: 30,
total: 100,
pageSizes: 10, 20, 30, 40, 50
}
// 扩展参数所有element-ui中table的属性，都可以配置进来
'show-header'：true, //不能写成 showHeader
// 事件配置参数所有element-ui中table的函数，都可以配置进来
events:{
//不能写成 rowClick
'row-click': (params) => {
console.log(params)
}
}
},
}

2、单个对象的属性配置：

属性	参数说明	默认项	说明
key	对象的键值对key，填入参数即可表格会自动回显
name	表格顶部title的名称
children	定义多级表头，需要是个数组，内部对象格式一样		详细看上文配置
tableShow	当前对象不在table中显示	false	ture为不显示
popupShow	当前对象不在弹窗中显示	false	ture为不显示
button	数组，内部配置对象。可以在table中渲染按钮组件		详细看上文配置
search	搜索组件，可以配置当前对象是否展示搜索，和类型定义		详细看上文配置
type	显示组件类型		可选 image
searchKey	搜索的key值。例如 key是'name'需要修改key searchKey:'userName'。也可以配置为对象， search的value是数组的时候，对应的可以设置对象 searchKey: { startDate: '', endDate: ''}	String	如果搜索需要的值和对象中的key不一样，可以使用searchKey

3、单个对象的函数渲染配置：

属性	参数说明	默认项	说明
render	渲染函数，可以自定义表格中单元格内的展示。函数参数有render(h,{ row, column,cellValue, index}) h为vue的渲染函数，后面有当前对象的所有属性值	无	详细看上文配置
headerRender	渲染函数，可以自定义表格中表头的展示。函数参数有headerRender(h,{ row, column,cellValue, index}) h为vue的渲染函数，后面有当前对象的所有属性值	无	详细看上文配置
popupRender	渲染函数，可以自定义弹窗中组件的展示形式。函数参数有popupRender(h,{ row, column,cellValue, index}) h为vue的渲染函数，后面有当前对象的所有属性值	无	详细看上文配置

4、辅助函数

事件名	事件说明	说明
this.$Dialog	新增和编辑弹窗
this.$refs.xsTableView.tableRefresh	表格刷新	需要在组件内加上ref="xsTableView"

this.$Dialog 和 this.$refs.xsTableView.tableRefresh配合使用

this.$Dialog({
  tableList: this.tableList,
  type: 'add',
  title: '测试title',
  width: '50%',
  cancelText: '禁止',
  confirmText: '启用',
  callback: (params, type) => {
    console.log(params, type + '弹窗回调----------')
    //关闭弹窗
    this.$Dialog.close()
    //刷新列表
    this.$refs.xsTableView.tableRefresh((params) => {
      console.log('表格刷新成功回调')
  })
}

点击并拖拽以移动

总结

xs-table-view可以帮助你快速开发传统的表格

支持element中组件的所有属性参数和函数事件

每个单元格，弹窗都可以自定义渲染

后期会继续完善功能

@everything-registry/sub-chunk-3189 @infinitebrahmanuniverse/nolb-xs

1.0.2

1 year ago

1.0.6

1 year ago

1.0.5