Iview-tables-chg NPM

iview-tables-chg

结合了iView的 tables 和 page组件，实现类似easyUI的表格效果，只需要设置column、data和total即可以展示带分页的表格，毕竟当数据量比较多的时候还是需要分页

示例

Example

安装

Use npm:

npm i iview-tables-chg

使用

全局引入

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css';
import ChgTables from 'iview-tables-chg'

Vue.use(ChgTables)

在需要使用的界面按需引用

import ChgTables from 'iview-tables-chg'

 export default {
    name: '',
    components: {
      ChgTables
    },

API

这里关于表格的属性和事件只列出新增和有别于iview的属性，其他的属性和事件都可以设置，参考iview table参考文档。 row-class-name不建议再另外设置了，不然会影响封装实现的一些样式；

Table Attributes

属性	说明	类型	参数	默认值
prop-data	表格的数据	Array	-	[]
columns	列配置，参照iview表格组件，索引列和多选无需配置	Array	-	[]
total	数据总数	Number	-	0
show-index	是否显示索引列	Boolean	-	false
show-selection	是否显示多选框，显示时单击即选中该行	Boolean	-	false
show-elevator	是否显示页码电梯，可以快速切换到某一页	Boolean	-	true
show-page	是否显示分页	Boolean	-	true
size-text-font-size	右下角页码描述字体大小	String	-	'14px'
pager-page-size	分页每页显示数据条数	Number	-	50
pager-page-size-opts	分页每页大小切换配置	Array	-	20, 50, 80, 100
highlight-row	iview表格自带，单击时可以高亮选中，在show-selection为true时无效	Boolean	-	false
save-check-data	翻页时是否保存勾选的数据，如果要使用此功能，需要设置行数据唯一标识，如id	Boolean	-	false
primary-column	置行数据唯一标识，如id	String	-	id

Table Methods

方法名	说明	参数	返回值
getParams	获取表格参数，页数页码等	-	Object, {pageSize, pageIndex, sortKey, sortType(desc, asc, normal)}
search	根据筛选条件刷新表格数据，页码重置为第一页，一般用于搜索	-	-
getSelects	获取选中的行数据	-	Array
getDisabled	获取被禁用的行数据	-	Array
selectRows	手动设置行选中以及禁用	(keys：行数据唯一标识数组, checked：是否选中，boolean, disabled=false 是否禁用)	-
selectAll	设置当页数据全选（用于多选）	-	-

使用slot自定义列

<ChgTables ref="demoTable" show-selection show-index :loading="loading" :columns="column" :total="total"
                   :prop-data="data" max-height="500px" sizeTextFontSize="12px"
                   :pagerPageSize="20" :pagerPageSizeOpts="[10, 20, 30]" @load-data="getData">
            <template slot-scope="{data}"  slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(data.index)">View</Button>
                <Button type="error" size="small" @click="remove(data.index)">Delete</Button>
            </template>
        </ChgTables>

列配置:

// slot的值为模板里的slot值
{
   title: '操作',
   align: 'center',
   slot: 'action'
},

扩展

如果有其他小伙伴们需要扩展现有的功能，可以download源代码： https://github.com/connie1992/iview-tables-chg npm run dev：开发环境 npm run build：编译源文件，npm上传需要在每次修改源码之后需要build一下，这样别人在通过npm安装使用时修改才能生效；
npm ：https://www.npmjs.com/package/iview-tables-chg

ivew table

@babel/runtime-corejs2 iview vue

@everything-registry/sub-chunk-1943 @zalastax/nolb-iv

5 years ago

5 years ago

5 years ago

5 years ago