# 表格 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>

# 带分页列表

带分页列表

可以通过配置`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`即可

<title>列表多选</title>
<describe>如果需要开启多选,可在`hc-grid`上配置`multiple`属性为`true`即可</describe>
<template>
    <div style="margin-bottom: 12px">
      <hc-button @click="handleToggleMultiple">{{multiple ? '关闭' : '开启'}}多选</hc-button>
    </div>
    <hc-grid
      :data="data"
      id-field="id"
      :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: '查看'
        }]
      }
    },
    methods: {
      handleToggleMultiple () {
        this.multiple = !this.multiple
      }
    }
}
</script>

# 启用loading以及刷新列

隐藏刷新 关闭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 () {
        this.loading = !this.loading
      },
      handleToggleRefresh () {
        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 () {
      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>

# 多视图

多视图

在`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 () {
        if (this.currentView === 'all') {
          return this.allViewColumns
        } else {
          return this.applyViewColumns
        }
      },
      allViewColumns () {
        return [{
          id: '11',
          label: '姓名',
          prop: 'name',
          type: 'node'
        }, {
          id: '12',
          label: '日期',
          prop: 'date'
        }]
      },
      applyViewColumns () {
        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>

# 单元格联动

单元格联动

通过对单元格控件配置`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>

# 属性及事件

# HcGrid属性

属性 说明 类型 可选值 默认值
id-field 行唯一标识,必填 string -- --
parent-field 父级字段,指定后会将当前数据转为层级数据 string -- --
height 列表高度, 默认平铺 -- -- --
title 列表标题 string -- --
data 数据对象 array -- --
loading 数据加载中状态 boolean -- false
validate-rules 数据校验规则 object -- --
editable 是否启用编辑 boolean -- false
editMode 列表编辑模式 number 1:行编辑模式 2:全列表编辑
multiple 是否启用列表多选 boolean -- false
show-refresh 是否显示刷新按钮 boolean -- true
default-sort 默认排序,如{Name: 'desc'}排序方式可为ascdesc object -- --

# 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:更新前的数据对象

# 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 -- --
resizeable 列宽是否允许拖拽,启用后用户可以鼠标按住列右侧进行宽度调整 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 列表自动完成组件 列表自动完成组件