0.3.9 • Published 5 years ago
znl-table v0.3.9
znl-table
表格组件
下载
npm install znl-table --save
引入
import ZnlTable from 'znl-table';
Vue.component('znl-table', ZnlTable);
例子
基本用法
:::demo 基本用法
<div class="znl-content">
<znl-table :columns="columns"
:item-source="tableData"
:loading="loading"
:pageIndex="pageIndex"
:showCheck="true"
:search-fields="test"
:on-page-changed="onPageChanged"
:total-count="3000"
:totalField="['UsableQty', 'InvQty']"
@on-config-save="test"
@click-link="clickLinkHandle"
@current-row-change="currentRowChangeHandle"
@select-change="selectChange"
checkboxBindingKey="ID"
gridtype="action"
ref="table"
:height="400">
</znl-table>
</div>
<script>
var config = [{
'GCGuid': '430183ac-378f-40fa-bd13-34920a2b6a34',
'PGGuid': '7c431e50-48b4-4766-8d5a-a534f9b1dcf7',
'CTitle': '库存GUID',
'BindField': 'StkGUID',
'IsShow': false,
'IsReadonly': false,
'ColumnWidth': 80,
'DisplayIndex': 0,
'DataType': 1,
'IsSystem': true,
'IsRequired': false,
'TableName': 'STK_Stock',
'ExtenValue': '{}',
'TableField': 'StkGUID'
},
{
'GCGuid': 'f10357de-40f7-476e-b72a-d9e85e1fdf15',
'PGGuid': '7c431e50-48b4-4766-8d5a-a534f9b1dcf7',
'CTitle': '图片',
'BindField': 'StockImage',
'IsShow': true,
'IsReadonly': true,
'ColumnWidth': 35,
'DisplayIndex': 1,
'DataType': 1,
'IsSystem': false,
'IsRequired': false,
'TableName': 'STK_Stock',
'ExtenValue': '{"cellColors":[]}',
'TableField': 'StockImage'
},
{
'GCGuid': '8fc546be-e808-4bfd-a527-4a1a67a50c01',
'PGGuid': '7c431e50-48b4-4766-8d5a-a534f9b1dcf7',
'CTitle': '型号',
'BindField': 'Model',
'IsShow': false,
'IsReadonly': false,
'ColumnWidth': 150,
'DisplayIndex': 2,
'DataType': 1,
'IsSystem': false,
'IsRequired': true,
'TableName': 'STK_Stock',
'ExtenValue': null,
'TableField': 'Model',
'IsUpperCase': true
}]
var itemSources = [{
'HaveContactInfo': false,
'ModelCount': 0,
'IsAddSpot': false,
'TotalCostAmount': 0,
'TotalSalesAmount': 0,
'RowNumber': 0,
'SID': 449029,
'StkGUID': 'a80a93ff-4548-498d-89ad-e871ba84c65e',
'Model': 'LPLPLP',
'Brand': 'ST',
'Packaging': 'SOP',
'MakeYear': '18+',
'MPQ': 'SOP',
'InvType': '补货',
'InvQty': 100,
'BuyPrice': 0,
'SalesPrice': '1.941748',
'FollowPrice': '',
'Unit': '片',
'UsableQty': 100,
'StorageName': '3',
'MarkingCode': '',
'Explain': '',
'StkInTime': '2018/10/26',
'BuyerName': '',
'UpdatedByName': 'Mr.an',
'UpdatedTime': '2018-10-26 16:27:24',
'InvPosition': ''
},
{
'HaveContactInfo': false,
'ModelCount': 0,
'IsAddSpot': false,
'TotalCostAmount': 0,
'TotalSalesAmount': 0,
'RowNumber': 0,
'SID': 449017,
'StkGUID': '5465adb8-3a2f-4342-959f-fe297303535a',
'Model': 'LPLPLP',
'Brand': 'ST',
'Packaging': 'SOP',
'MakeYear': '18+',
'MPQ': 'SOP',
'Quality': '原装',
'InvType': '补货',
'InvQty': 0,
'BuyPrice': 0,
'SalesPrice': '1.941748',
'Unit': '片',
'UsableQty': 0,
'BuyerName': '',
'UpdatedByName': 'Mr.an',
'UpdatedTime': '2018-10-26 16:25:46',
'InvPosition': ''
}]
export default {
data () {
return {
columns: [],
tableData: [],
pageIndex: 1,
loading: false,
showSearch: true,
isSettingDialogShow: true,
config
}
},
methods: {
searchModel (params) {
console.log(params)
},
addRow () {
let data = this.$refs.table.getActiveRow()
console.log(data, 'data')
},
delRow () {
this.$refs.table.getChangeConfig()
},
addLine () {
this.showSearch = !this.showSearch
},
test (e) {
console.log(e)
},
clickLinkHandle (e) {
console.log(e, 'event')
},
onPageChanged (e) {
this.pageIndex = e
},
selectChange (e) {
// console.log(e)
},
currentRowChangeHandle (event) {
console.log(event, 'currentRowChangeHandle')
}
},
computed: {},
mounted () {
let tempConfig = [
{
title: '自定义组件',
width: 100,
canSearch: false,
componentName: 'test1',
isFrozen: true,
component: {
template: `<div>test</div>`,
props: {
rowData: {
type: Object
},
field: {
type: String
},
index: {
type: Number
}
},
methods: {
update () {
// 参数根据业务场景随意构造
let params = {
type: 'edit',
index: this.index,
rowData: this.rowData,
event: 'click-link',
}
this.$emit('on-custom-comp', params)
},
deleteRow () {
// 参数根据业务场景随意构造
let params = {type: 'delete', index: this.index}
this.$emit('on-custom-comp', params)
}
}
}
},
{
width: 40,
type: 'panel',
title: '面板',
isFrozen: true,
canSearch: false,
classNames: ['el-icon-picture', 'el-icon-picture-outline'],
status (rowData) {
return 0
},
render(rowData,rowIndex, field) {
let str = ''
_.map(rowData, (value, key) => {
str += `<div>${key}: ${value}</div>`
})
return str
}
},
{
width: 40,
type: 'menus',
isDeal: false,
isFrozen: true,
canSearch: false,
title: '操作',
config: [
{
title: '询价',
name: 'Inquiry',
click: row => {
console.log('1')
}
},
{
title: '销售备货',
name: 'StkReserve',
click: row => {
console.log('2')
}
},
{
title: '采购订货',
name: 'StkPurchase',
click: row => {
console.log('3')
}
},
{
title: '删除库存',
name: 'DelStock',
click: row => {
console.log('4')
}
}
]
},
{
width: 40,
type: 'button',
title: '出',
btnTxt: '出',
canSearch: false,
isDeal: false,
click: row => {
return true
}
}
]
_.extend(config[_.findIndex(config, item => item.BindField === 'Packaging')], {
type: 'select',
width: 100,
detail: 'test',
options: [
{
key: '原装',
value: '原装'
}]
})
_.extend(config[_.findIndex(config, item => item.BindField === 'StockImage')], {
type: 'icon',
canSearch: false,
classNames: ['el-icon-picture', 'el-icon-picture-outline'],
status (row) {
return 0
},
click (row) {
console.log(row)
}
})
_.extend(config[_.findIndex(config, item => item.BindField === 'SalesPrice')], {
isReadOnly: true,
event: 'click-link',
className: 'v-link',
})
this.columns = tempConfig.concat(config)
setTimeout(() => {
this.tableData = itemSources
this.$refs.table.init()
}, 200)
}
}
</script>
<style>
.znl-content {
width: 100%;
height: 400px;
box-sizing: border-box;
}
body {
margin: 0;
}
.v-link > .v-table-body-cell span {
cursor: pointer;
color: #0092dd;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.v-display-none {
display: none !important;
}
</style>
:::
组件内事件
方法名 | 参数 | 说明 |
---|---|---|
init | 表格初始化 | |
getEditList | 获取列表当前编辑过的行 | |
getCheckList | 获取当前选中的行的下标 | |
cleanEdit | 清除编辑过的行的样式 | |
cleanAllCheck | 清除选中行 | |
addRow | 新增行数(可选) | 新增一行 |
delRow | 删除选中行 |
列配置参数
属性名 | 可传参数/默认值 | 类型 | 说明 |
---|---|---|---|
width | Number | 宽度,数字类型 | |
type | selection/button | String | 单元格类型 |
title | String | 列标题 | |
dataType | Number | 单元格字段的类型会决定排列的方式 | |
className | String | 这一列的类名 | |
isReadonly | Boolean | 是否为只读 | |
field | String | 绑定的字段 | |
isDeal | true | Boolean | 是否用表格内置的处理 |
isShow | Boolean | 是否显示当前列 | |
gridtype | 'base' | String | 值为action 时方可编辑 |
canSearch | Boolean | 值为true 时方可搜索 | |
event | String | 单元格里传出来的事件名 |
表格配置
属性名 | 可传参数/默认值 | 类型 | 说明 |
---|---|---|---|
columns | Arrary | 列配置,参考上面 | |
gridtype | action/base | String | 表格类型 |
itemSource | Arrary | 数据源 | |
pageIndex | 1 | Number | 第几页 |
pageSize | 30 | Number | 每页条数 |
totalCount | 0 | Number | 数据总条数 |
itemSource | Arrary | 数据源 | |
showIndex | false | Boolean | 是否显示行索引 |
is-fields-search | false | Boolean | 是否开启搜索 |
search-fields | Function | 传出一个对象,key为字段名,value为筛选值 |
监听事件
属性名 | 可传参数/默认值 | 类型 | 说明 |
---|---|---|---|
on-custom-comp | Function | 单元格传出事件 | |
select-change | Function | 选择勾中或者取消的时候触发的事件 | |
on-page-changed | Function | 表格当前页码改变时执行的方法,该方法不传参数表示不启用分页 |
0.3.9
5 years ago
0.3.7
5 years ago
0.3.6
5 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.0
5 years ago
0.1.28
5 years ago
0.1.27
5 years ago
0.1.26
5 years ago
0.1.25
5 years ago
0.1.23
5 years ago
0.1.22
5 years ago
0.1.21
5 years ago
0.1.20
5 years ago
0.1.19
5 years ago
0.1.18
5 years ago
0.1.17
5 years ago
0.1.16
5 years ago
0.1.15
5 years ago
0.1.14
5 years ago
0.1.13
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.12
5 years ago
0.1.11
5 years ago
0.1.10
5 years ago
0.1.9
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago