# 表格 Grid
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
# 基础使用
基础使用
基础的表格展示用法。
<title>基础使用</title>
<describe>基础的表格展示用法。</describe>
<template>
<hc-grid
:data="data"
id-field="id"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 无边框列表
无边框列表
表格无边框模式的用法。通过bordered配置来实现。
<title>无边框列表</title>
<describe>表格无边框模式的用法。通过bordered配置来实现。</describe>
<template>
<hc-grid
:data="data"
id-field="id"
:bordered="false"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 带分页列表
带分页列表
可以通过配置`hc-grid-pagination`组件，界面上会显示分页栏
<title>带分页列表</title>
<describe>可以通过配置`hc-grid-pagination`组件，界面上会显示分页栏</describe>
<template>
<hc-grid
:data="data"
id-field="id"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
<hc-grid-pagination :total="100" :page-index="0" :page-size="20" @page-change="handlePageChange"></hc-grid-pagination>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
methods: {
handlePageChange: function (evt) {
console.log(evt)
alert(`页码${evt.pageIndex}，行数${evt.pageSize}`)
}
}
}
</script>
# 编辑列表校验
编辑列表
列表单元格编辑状态可通过editable为true启用，并且可配和editMode设置编辑模式，`1`为行编辑，`2`为全列表编辑
<title>编辑列表</title>
<describe>列表单元格编辑状态可通过editable为true启用，并且可配和editMode设置编辑模式，`1`为行编辑，`2`为全列表编辑</describe>
<template>
<div style="margin-bottom: 12px; width: 200px;">
<hc-select v-model="editMode" :data="editModeOptions"></hc-select>
</div>
<hc-grid
id-field="id"
:data="data"
:edit-mode="editMode"
:validate-rules="validateRules"
:editable="true"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date" ></hc-grid-column>
<hc-grid-column label="姓名" field="name">
<template slot-scope="scope">
<hc-grid-column-textbox
:value="scope.row.name"
></hc-grid-column-textbox>
</template>
</hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
editMode: 2,
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
validateRules: function () {
return {
name: [{
required: true,
message: '姓名不能为空',
trigger: 'blur'
}]
}
},
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
},
editModeOptions: function () {
return [{
value: 1,
text: '行编辑模式'
}, {
value: 2,
text: '全列表编辑'
}]
}
}
}
</script>
# 层级列表
层级列表
通过配置`parentField`字段，并且在HcGridColumns上指定层级字段，即可以树形列表形式展示数据
<title>层级列表</title>
<describe>通过配置`parentField`字段，并且在HcGridColumns上指定层级字段，即可以树形列表形式展示数据</describe>
<template>
<hc-grid
id-field="id"
parent-field="pid"
:data="data"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns tree-column="name">
<hc-grid-column label="姓名" field="name" :width="150"></hc-grid-column>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
aa:1,
data: [{
id: 1,
date: '2016-01-02',
name: '孙凤鸣',
pid: null,
address: '湖北省黄冈市开发区新港二路146号'
}, {
id: 4,
date: '2017-02-01',
name: '徐东平',
pid: 1,
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 5,
date: '2016-12-03',
name: '刘美玲',
pid: 1,
address: '北京市石景山区晋元庄路6号'
}, {
id: 2,
date: '2016-05-02',
name: '周志刚',
pid: null,
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2018-02-04',
name: '王小虎',
pid: null,
address: '武汉市光谷天地345号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 列表汇总
列表汇总
通过挂载HcGridSummary组件，即可开启合计栏，默认会对列表的数值列进行汇总并显示，注意首列不要为数值列，此处会显示`合计`文本，同时配置了`summary-method`后会使用自定义的合计显示
<title>列表汇总</title>
<describe>通过挂载HcGridSummary组件，即可开启合计栏，默认会对列表的数值列进行汇总并显示，注意首列不要为数值列，此处会显示`合计`文本，同时配置了`summary-method`后会使用自定义的合计显示</describe>
<template>
<hc-grid
:data="data"
id-field="id"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="年龄" field="age"></hc-grid-column>
<hc-grid-column label="报名费" field="money">
<template slot="tips">
报名费合计四舍五入取整
</template>
</hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
<hc-grid-summary :summary-method="handleSummaryMethod"></hc-grid-summary>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
date: '2016-05-02',
name: '周志刚',
age: 12,
money: 234.34,
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2018-02-04',
name: '王小虎',
age: 15,
money: 124.88,
address: '武汉市光谷天地345号'
}, {
date: '2017-02-01',
name: '徐东平',
age: 11,
money: 456.67,
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
date: '2016-12-03',
name: '刘美玲',
age: 18,
money: 323.45,
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
methods: {
handleSummaryMethod: function (evt) {
var newSummary = {}
// 使用自定义合计
for (var i in evt.localSummary) {
newSummary[i] = Math.round(evt.localSummary[i])
}
return newSummary
}
}
}
</script>
# 列表多选
列表多选
如果需要开启多选，可在`hc-grid`上配置`multiple`属性为`true`即可, `row-selection`可配置行是否可选
<title>列表多选</title>
<describe>如果需要开启多选，可在`hc-grid`上配置`multiple`属性为`true`即可, `row-selection`可配置行是否可选</describe>
<template>
<div style="margin-bottom: 12px">
<hc-button @click="handleToggleMultiple">{{multiple ? '关闭' : '开启'}}多选</hc-button>
</div>
<hc-grid
:data="data"
id-field="id"
:row-selection="rowSelection"
:multiple="multiple"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
multiple: true,
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
},
rowSelection: function () {
return {
selectable: function(item) {
// 判断当前行是否允许选择
return item.id !== 2
}
}
}
},
methods: {
handleToggleMultiple: function() {
this.multiple = !this.multiple
}
}
}
</script>
# 默认选择的行数据
默认选择的行数据
如果需要默认选中数据，可在`hc-grid`上配置`default-selected-keys`可设置默认选择的行数据
<title>默认选择的行数据
</title>
<describe>如果需要默认选中数据，可在`hc-grid`上配置`default-selected-keys`可设置默认选择的行数据</describe>
<template>
<hc-grid
:data="data"
id-field="id"
multiple
:default-selected-keys="defaultSelectedkeys"
@selection-change="selectionChange"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
multiple: true,
data: [{
id: '11b11db4-e907-4f1f-8835-b9daab6e1f23',
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '08dac224-38c8-4a6b-8a00-9995d3895e01',
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: '6beaecc6-5459-eb11-902c-cb823b2d279f',
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 'd2a3a4fe-fe1b-4d02-921c-578cbece94cf',
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}],
/**
* 第一种：索引集合 [0, 2]
* 第二种：主键集合 ['08dac224-38c8-4a6b-8a00-9995d3895e01', '6beaecc6-5459-eb11-902c-cb823b2d279f']
* 第三种：行对象主键集合 [{
id: '11b11db4-e907-4f1f-8835-b9daab6e1f23',
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}]
*/
defaultSelectedkeys: [0, 2]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
methods: {
selectionChange: function(evt) {
console.log(evt.selection)
}
}
}
</script>
# 启用loading以及刷新列
启用loading以及刷新列
数据加载时可配置`loading`属性，开启一个加载遮罩层，也支持通过配置`show-refresh`显示刷新按钮
<title>启用loading以及刷新列</title>
<describe>数据加载时可配置`loading`属性，开启一个加载遮罩层，也支持通过配置`show-refresh`显示刷新按钮</describe>
<template>
<div style="margin-bottom: 12px;">
<hc-button @click="handleToggleRefresh" style="margin-right: 12px;">{{showRefresh ? '隐藏' : '显示'}}刷新</hc-button>
<hc-button @click="handleToggleLoading">{{loading ? '关闭' : '开启'}}loading</hc-button>
</div>
<hc-grid
:data="data"
id-field="id"
:loading="loading"
:show-refresh="showRefresh"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
loading: true,
showRefresh: true,
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
methods: {
handleToggleLoading: function() {
this.loading = !this.loading
},
handleToggleRefresh: function() {
this.showRefresh = !this.showRefresh
}
}
}
</script>
# 序号列
序号列
配置`show-index`属性，可在列表最前面显示一个序号列
<title>序号列</title>
<describe>配置`show-index`属性，可在列表最前面显示一个序号列</describe>
<template>
<hc-grid
:data="data"
id-field="id"
:show-index="true"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 排序
排序
可以通过在`column`上配置`sortable`为`true`，即可开启列排序功能，同时在`hc-grid`上配置`default-sort`可以配置默认的排序
<title>排序</title>
<describe>可以通过在`column`上配置`sortable`为`true`，即可开启列排序功能，同时在`hc-grid`上配置`default-sort`可以配置默认的排序</describe>
<template>
<div style="margin-bottom: 12px" v-if="sorts">当前排序：<span v-for="(sort, index) in sorts" :index="index" style="margin-right: 20px;">{{sort.field}}：{{sort.order}}</span></div>
<hc-grid
:data="data"
id-field="id"
:default-sort="defaultSort"
:show-index="true"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" :sortable="true" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
ss:"yyyy/MM/dd",
sorts: null,
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
defaultSort: function() {
return {
name: 'desc'
}
},
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
}
</script>
# 冻结列
冻结列
可以通过在HcGridColumns上配置`fixed-columns`需要冻结列额数量，即可将列冻结在列表左侧，在`hc-grid`上配置`fixed-row-toolbar`可将行操作按钮配置到列表右侧
<title>冻结列</title>
<describe>可以通过在HcGridColumns上配置`fixed-columns`需要冻结列额数量，即可将列冻结在列表左侧，在`hc-grid`上配置`fixed-row-toolbar`可将行操作按钮配置到列表右侧</describe>
<template>
<hc-grid
:data="data"
id-field="id"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns :fixed-columns="1">
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name" :width="150"></hc-grid-column>
<hc-grid-column label="性别" field="sex" :width="150"></hc-grid-column>
<hc-grid-column label="年龄" field="age" :width="150"></hc-grid-column>
<hc-grid-column label="生日" field="birthday" :width="200"></hc-grid-column>
<hc-grid-column label="身份证" field="idNumber" :width="150"></hc-grid-column>
<hc-grid-column label="联系电话" field="phone" :width="150"></hc-grid-column>
<hc-grid-column label="家庭住址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
phone: '18627032178',
birthday: '2018-12-22',
idNumber: '320229211993232123',
age: 23,
sex: '男',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
phone: '18627032178',
idNumber: '320229211993232123',
birthday: '2018-12-22',
age: 23,
sex: '男',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
phone: '18627032178',
idNumber: '320229211993232123',
birthday: '2018-12-22',
age: 23,
sex: '男',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
phone: '18627032178',
idNumber: '320229211993232123',
birthday: '2018-12-22',
age: 23,
sex: '男',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 列头提示
列头提示
在需要对列进行描述说明的时候，可以通过在列里面使用`tips`解决
<title>列头提示</title>
<describe>在需要对列进行描述说明的时候，可以通过在列里面使用`tips`解决</describe>
<template>
<div style="margin-bottom: 12px" v-if="sorts">当前排序：<span v-for="(sort, index) in sorts" :index="index" style="margin-right: 20px;">{{sort.field}}：{{sort.order}}</span></div>
<hc-grid
id-field="id"
:data="data"
:show-index="true"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date" tips="测试的提示信息"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
sorts: null,
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 表头提示
表头提示
在需要对表头描述说明的时候，可以通过在grid上使用 tooltip 解决
<title>表头提示</title>
<describe>在需要对表头描述说明的时候，可以通过在grid上使用 <code>tooltip</code> 解决</describe>
<template>
<div style="margin-bottom: 12px" v-if="sorts">当前排序：<span v-for="(sort, index) in sorts" :index="index" style="margin-right: 20px;">{{sort.field}}：{{sort.order}}</span></div>
<hc-grid
id-field="id"
:data="data"
:show-index="true"
:tooltip="tooltip"
:tips-type="tipsType"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
sorts: null,
tooltip: '表头提示说明',
tipsType: 'always-show',
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 多视图
多视图
在`hc-grid`中挂载`hc-grid-view-select`组件可以配置多个视图，通过切换当前视图，更改`column`集合来模拟列表切换
<title>多视图</title>
<describe>在`hc-grid`中挂载`hc-grid-view-select`组件可以配置多个视图，通过切换当前视图，更改`column`集合来模拟列表切换</describe>
<template>
<hc-grid
id-field="id"
:data="data"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-view-select v-model="currentView" :items="gridViewItems"></hc-grid-view-select>
<hc-grid-columns>
<hc-grid-column
v-for="column in currentViewColumns"
:key="column.id"
:label="column.label"
:field="column.prop"
:width="150"
></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
currentView: 'all',
data: [{
id: 1,
date: '2016-01-02',
name: '孙凤鸣',
address: '湖北省黄冈市开发区新港二路146号',
children: [{
id: 2,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}]
}, {
id: 4,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 5,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
gridViewItems: function () {
return [{
text: '全部',
value: 'all'
}, {
text: '已审核',
value: 'apply'
}]
},
currentViewColumns: function() {
if (this.currentView === 'all') {
return this.allViewColumns
} else {
return this.applyViewColumns
}
},
allViewColumns: function() {
return [{
id: '11',
label: '姓名',
prop: 'name',
type: 'node'
}, {
id: '12',
label: '日期',
prop: 'date'
}]
},
applyViewColumns: function() {
return [{
id: '21',
label: '姓名（已审核）',
prop: 'name',
type: 'node'
}, {
id: '23',
label: '地址（已审核）',
prop: 'address'
}]
},
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 工具栏
工具栏
在`hc-grid`中挂载`hc-grid-toolbar`组件可以配置列表按钮操作工具栏
<title>工具栏</title>
<describe>在`hc-grid`中挂载`hc-grid-toolbar`组件可以配置列表按钮操作工具栏</describe>
<template>
<hc-grid
id-field="id"
title="用户列表"
:multiple="true"
:data="data"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-global-toolbar :items="globalToolbarItems"></hc-grid-global-toolbar>
<hc-grid-batch-toolbar :items="batchToolbarItems"></hc-grid-batch-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-01-02',
name: '孙凤鸣',
address: '湖北省黄冈市开发区新港二路146号',
children: [{
id: 2,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}]
}, {
id: 4,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 5,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
globalToolbarItems: function () {
return [{
label: '新增',
name: 'add',
type: 'primary',
click: function (evt) {
console.log(evt)
}
}, {
label: '导出',
name: 'export',
click: function (evt) {
console.log(evt)
}
}]
},
batchToolbarItems: function () {
return [{
label: '',
name: 'resolve',
click: function (evt) {
console.log(evt)
}
}, {
label: '驳回',
name: 'reject',
click: function (evt) {
console.log(evt)
}
}]
},
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
}
}
</script>
# 按钮异步loading
行按钮loading
`hc-grid-toolbar`组件可以配置列表按钮操作工具栏,所有按钮均可通过`Promise`可实现异步loading，其中行按钮整行共用loading状态
<title>行按钮loading</title>
<describe>`hc-grid-toolbar`组件可以配置列表按钮操作工具栏,所有按钮均可通过`Promise`可实现异步loading，其中行按钮整行共用loading状态</describe>
<template>
<hc-grid
id-field="id"
title="用户列表"
:multiple="true"
:data="data"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-global-toolbar :items="globalToolbarItems"></hc-grid-global-toolbar>
<hc-grid-batch-toolbar :items="batchToolbarItems"></hc-grid-batch-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-01-02',
name: '孙凤鸣',
address: '湖北省黄冈市开发区新港二路146号',
children: [{
id: 2,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 3,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}]
}, {
id: 4,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 5,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
globalToolbarItems: function () {
return [{
label: '新增',
name: 'add',
type: 'primary',
click: function (evt) {
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000)
})
}
}]
},
batchToolbarItems: function () {
return [{
label: '驳回',
name: 'reject',
click: function (evt) {
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000)
})
}
}]
},
rowToolbar: function () {
return [{
name: 'view',
label: '查看',
click: function() {
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000)
})
}
},{
name: 'delete',
label: '删除',
click: function() {
// 在线编码使用$util.deffer代替promise和$_.delay代替setTimeout
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 3000)
})
}
}]
}
}
}
</script>
# 单元格联动
单元格联动
通过对单元格控件配置`cascade-field`,`cascade-callback`属性，可以完成联动控制
<title>单元格联动</title>
<describe>通过对单元格控件配置`cascade-field`,`cascade-callback`属性，可以完成联动控制</describe>
<template>
<hc-grid
id-field="id"
title="用户列表"
:multiple="false"
:editable="true"
:data="data"
>
<hc-grid-row-toolbar :fixed="true" :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="公司" field="company">
<template slot-scope="scope">
<hc-grid-column-select
:data="companyData"
:value="scope.row.company"
>
</hc-grid-column-select>
</template>
</hc-grid-column>
<hc-grid-column label="成员" field="name">
<template slot-scope="scope">
<hc-grid-column-select
:value="scope.row.people"
view-text-field="peopleText"
cascade-field="company"
:cascade-callback="handleLinkageCallback"
>
</hc-grid-column-select>
</template>
</hc-grid-column>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: '1',
date: '2016-05-02',
people: '91c412d8-e9bb-e811-8b9e-94c69104026b',
peopleText: '灏明',
company: '92c45ad8-e9bb-e811-8b9e-94c69104026b',
companyText: '上海公司',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: '2',
date: '2018-02-04',
people: '91c412d8-e9bb-e811-8b9e-94c69104026b',
peopleText: '灏明',
company: '92c45ad8-e9bb-e811-8b9e-94c69104026b',
companyText: '上海公司',
address: '武汉市光谷天地345号'
}, {
id: '3',
date: '2017-02-01',
people: '91c412d8-e9bb-e811-8b9e-94c69104026b',
peopleText: '灏明',
company: '92c45ad8-e9bb-e811-8b9e-94c69104026b',
companyText: '上海公司',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: '4',
date: '2016-12-03',
people: '91c45ad8-cccb-e811-8b9e-94c69104026b',
peopleText: '周晓明',
company: '92c45ad8-e9bb-e811-8b9e-94c69104026b',
companyText: '上海公司',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
companyData: function () {
return [{
value: '91c45ad8-e9bb-e811-8b9e-94c69104026b',
text: '武汉公司'
}, {
value: '92c45ad8-e9bb-e811-8b9e-94c69104026b',
text: '上海公司'
}]
},
peopleData1: function () {
return [{
value: '91c45ad8-cccb-e811-8b9e-94c69104026b',
text: '周晓明'
}, {
value: '91c45ad8-e9bb-e811-8b9e-94c23404026b',
text: '童玉溪'
}]
},
peopleData2: function () {
return [{
value: '91c412d8-e9bb-e811-8b9e-94c69104026b',
text: '灏明'
}, {
value: '91c45ad8-e9bb-e811-8b9e-94c69104326b',
text: '程臻美'
}]
},
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
methods: {
handleLinkageCallback: function(evt) {
var me = this
var row = evt.row
var value = evt.value
if (value === '92c45ad8-e9bb-e811-8b9e-94c69104026b') {
return {
data: me.peopleData1
}
} else {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve({
data: me.peopleData2
})
}, 200)
})
}
}
}
}
</script>
# 点击事件
行点击事件
行点击事件，`row-click`默认参数为`event`，`event.row`为当前行数据
<title>行点击事件</title>
<describe>行点击事件，`row-click`默认参数为`event`，`event.row`为当前行数据</describe>
<template>
<hc-grid
:data="data"
id-field="id"
@row-click="rowClick"
>
<hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
<hc-grid-columns>
<hc-grid-column label="日期" field="date"></hc-grid-column>
<hc-grid-column label="姓名" field="name"></hc-grid-column>
<hc-grid-column label="地址" field="address"></hc-grid-column>
</hc-grid-columns>
</hc-grid>
</template>
<script>
export default {
data: function () {
return {
data: [{
id: 1,
date: '2016-05-02',
name: '周志刚',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2018-02-04',
name: '王小虎',
address: '武汉市光谷天地345号'
}, {
id: 3,
date: '2017-02-01',
name: '徐东平',
address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
}, {
id: 4,
date: '2016-12-03',
name: '刘美玲',
address: '北京市石景山区晋元庄路6号'
}]
}
},
computed: {
rowToolbar: function () {
return [{
name: 'view',
label: '查看'
}]
}
},
methods: {
rowClick: function(evt) {
var row = evt.row
console.log('当前行数据的姓名是', row.name)
}
}
}
</script>
# 属性及事件
# HcGrid属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
id-field | 行唯一标识，必填 | string | -- | -- |
parent-field | 父级字段，指定后会将当前数据转为层级数据 | string | -- | -- |
height | 列表高度， 默认为null表示平铺 | string/null | -- | -- |
title | 列表标题 | string | -- | -- |
data | 数据对象 | array | -- | -- |
loading | 数据加载中状态 | boolean | -- | false |
validate-rules | 数据校验规则 | object | -- | -- |
editable | 是否启用编辑 | boolean | -- | false |
edit-mode | 列表编辑模式 | number | 1：行编辑模式 2：全列表编辑 | 1 |
multiple | 是否启用列表多选 | boolean | -- | false |
show-refresh | 是否显示刷新按钮 | boolean | -- | true |
bordered | 是否显示边框 | boolean | -- | true |
default-sort | 默认排序，如{Name: 'desc'}排序方式可为asc和desc | object | -- | -- |
show-index | 是否显示序号列 | boolean | -- | false |
row-selection | 选择功能的配置 | object | -- | null |
default-selected-keys | 默认已选择的行, 索引、主键、行对象集合 | array | -- | [] |
tooltip | 表头提示说明 | string | -- | `` |
tips-type | 表头提示说明类型 | string | popover / always-show | popover |
# rowSelection配置项
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
selectable | 列表选项是否可以选择，默认参数为当前行数据data，返回boolean类型（默认可以选择） | Function | -- | null |
# HcGrid方法
| 名称 | 说明 | 参数 | 返回值 |
|---|---|---|---|
validate | 校验当前列表数据 | -- | boolean |
updateRow | 更新指定行数据 | row：行对象或者行索引或者行的主键值 data：要更新的数据对象 | -- |
addRow | 向列表中新增一条行记录 | data：插入的行数据对象，注意必须有主键值index：指定插入的位置，默认为末尾parent：指定插入的父级，仅在树列表模式生效 | -- |
removeRow | 向列表中移除一条行记录 | row：指定移除的行对象或者行索引或者行主键值 | -- |
getData | 获取列表数据，注意如果是新增的行没有给主键值，那么获取的返回值也不会包含主键值 | -- | 返回当前列表的数据集合 |
selects | 选中或者反选指定的行集合 | rows：行对象、索引、主键集合selected：是否选中，为false时表示反选 | -- |
addRows | 批量插入行 | data：要插入的行数据集合index：指定插入的位置，默认为末尾parent：指定插入的父级，仅在树列表模式生效 | -- |
removeRows | 批量移除行 | rows：要删除的行对象、索引、主键集合 | -- |
updateRows | 批量更新行 | rows：要更新的行对象、索引、主键集合data：更新的数据对象 | -- |
# HcGrid事件
| 名称 | 说明 | 参数 |
|---|---|---|
select-change | 单选模式时，选中行改变事件 | event.select：当前选中的行 |
selection-change | 多选模式时，选中集合改变事件 | event.selection：当前选择的行集合 |
row-change | 更新行数据时，触发事件 | event.fields：值改变的字段集合 event.data：更新后的数据对象 event.oldData：更新前的数据对象 |
row-click | 点击行时，触发事件（多选框、按钮不触发） | event.row：当前点击行的字段集合 |
# HcGridColumns属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
level-icons | 层级图标配置项，如['mp-icon-home']，仅树形列表 | array | -- | -- |
expand-level | 初始展开层级 | number | -- | 2 |
tree-column | 层级列字段名称 | string | -- | -- |
fixed-columns | 从左侧开始冻结的列数，排查索引列和多选列 | number | -- | -- |
upward-summary | 启用向上汇总字段集合，仅树列表支持，同时启用后只有末级单元格可以编辑，父级自动根据子级数据进行汇总计算 | string[] | -- | -- |
# HcGridColumn属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
label | 列头显示的文本 | string | -- | -- |
align | 列对应的单元格内容文本方式 | string | left / center / right | left |
field | 数据属性名称，单元格渲染时会根据prop读取显示的文本 | string | -- | -- |
width | 列显示宽度配置 | number | -- | 120 |
sortable | 是否允许排序，启用后会在列头文本旁边显示排序图标，点击会触发排序事件 | boolean | -- | false |
sort-field | 设置排序字段，默认为当前列的field属性值 | string | -- | -- |
resizable | 列宽是否允许拖拽，启用后用户可以鼠标按住列右侧进行宽度调整 | boolean | -- | true |
formatter | 单元格内容查看时格式化字符串，目前仅支持日期和数字类型的格式化方式，如yyyy-MM-dd hh:mm:ss或#,###.0000 日期格式为Date类型 | string | -- | -- |
tips | 列头提示信息文本 | string | -- | -- |
# HcGridViewSelect属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
type | 视图选择显示方式 | string | list / menu | list |
items | 视图选项集合 | array | -- | -- |
value | 当前选中的视图值，支持v-model方式使用 | string | -- | -- |
# HcGridGlobarlToolbar属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
items | 工具栏配置项，具体参考工具栏 | array | -- | -- |
# HcGridBatchToolbar属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
items | 工具栏配置项，具体参考工具栏 | array | -- | -- |
# HcGridRowToolbar属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
width | 行工具栏宽度 | number | -- | 120 |
fixed | 是否冻结工具栏 | boolean | -- | false |
items | 工具栏配置项，具体参考工具栏 | array | -- | -- |
# HcColumnControl相关属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
cascade-field | 联动的字段值 | string | -- | -- |
cascade-callback | 联动后的回调函数，目前仅支持回调函数里面返回data进行备选项的更新 | Function | -- | -- |
# HcColumnControl相关组件
| 名称 | 说明 | 链接 |
|---|---|---|
HcGridColumnTextbox | 列表文本输入组件 | 列表文本输入组件 |
HcGridColumnSpinner | 列表数值组件 | 列表数值组件 |
HcGridColumnSelect | 列表下拉选择组件 | 列表下拉选择组件 |
HcGridColumnUpload | 列表上传组件 | 列表上传组件 |
HcGridColumnAutocomplate | 列表自动完成组件 | 列表自动完成组件 |
登录