Honeycomb Design

# 编辑表格 Grid

用于展示多条结构类似的数据，可对数据编辑，收集相关操作。

# 列表文本输入组件

文本输入编辑

展示基础的列表文本数据编辑使用场景

<title>文本输入编辑</title>
<describe>展示基础的列表文本数据编辑使用场景</describe>
<template>
    <hc-grid
      id-field="id"
      :data="data"
      :editable="true"
      :edit-mode="1"
    >
      <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"
                @change="handleNameChange"
              ></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 {
          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: '查看',
          visible: function () {
            return true
          }
        }]
      }
    },
    methods: {
      handleNameChange (evt) {
        console.log(evt)
      }
    }
}
</script>

# 列表数值组件

数值输入编辑

展示基础的列表文本数据编辑使用场景

<title>数值输入编辑</title>
<describe>展示基础的列表文本数据编辑使用场景</describe>
<template>
    <hc-grid
      id-field="id"
      :data="data"
      :editable="true"
      :edit-mode="1"
    >
      <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="money" formatter="#,###.00">
         <template slot-scope="scope" >
           <hc-grid-column-spinner
             :value="scope.row.money"
             @change="handleNameChange"
           ></hc-grid-column-spinner>
        </template>
        </hc-grid-column>
      <hc-grid-column label="交税" field="money">
      <template slot-scope="scope">
        <hc-grid-column-spinner
        :value="scope.row.tax"
        :decimal-places="2"
        :rounding="4"
        :allow-empty="false"
        :show-thousandths="false">
    </hc-grid-column-spinner>
    </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 {
          data: [{
            id: 1,
            date: '2016-05-02',
            money: 1111.236,
            tax: 5785.679,
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id: 2,
            date: '2018-02-04',
            money: 23.236,
            tax: 5785.679,
            address: '武汉市光谷天地345号'
          }, {
            id: 3,
            date: '2017-02-01',
            money: 456.236,
            tax: 5785.679,
            address: '湖南省长沙市望城区银星路与潇湘景观道交汇处'
          }, {
            id: 4,
            date: '2016-12-03',
            money: 2222.236,
            tax: 5785.679,
            address: '北京市石景山区晋元庄路6号'
          }]
      }
    },
    computed: {
      rowToolbar: function () {
        return [{
          name: 'view',
          label: '查看',
          visible: function () {
            return true
          }
        }]
      }
    },
    methods: {
      handleNameChange (evt) {
        console.log(evt)
      }
    }
}
</script>

# 列表下拉选择组件

下拉选择编辑

展示基础的列表文本数据编辑使用场景

<title>下拉选择编辑</title>
<describe>展示基础的列表文本数据编辑使用场景</describe>
<template>
    <hc-grid
      id-field="id"
      :data="data"
      :editable="true"
      :edit-mode="1"
    >
      <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-select
                :data="nameOptions"
                :value="scope.row.name"
                @change="handleNameChange"
              ></hc-grid-column-select>
            </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 {
          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: '查看',
          visible: function () {
            return true
          }
        }]
      },
      nameOptions () {
        return [{
          text: '张三',
          value: '张三'
        }, {
          text: '李四',
          value: '李四'
        }, {
          text: '王五',
          value: '王五'
        }]
      }
    },
    methods: {
      handleNameChange (evt) {
        console.log(evt)
      }
    }
}
</script>

# 列表上传附件组件

列表上传附件

展示基础的列表上传附件编辑使用场景

<title>列表上传附件</title>
<describe>展示基础的列表上传附件编辑使用场景</describe>
<template>
    <hc-grid
      id-field="id"
      :data="data"
      :editable="true"
      :edit-mode="1"
    >
      <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-upload
                :data="nameOptions"
              ></hc-grid-column-upload>
            </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 {
          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: '查看',
          visible: function () {
            return true
          }
        }]
      },
      nameOptions () {
        return [{
          text: '张三',
          value: '张三'
        }, {
          text: '李四',
          value: '李四'
        }, {
          text: '王五',
          value: '王五'
        }]
      }
    },
    methods: {
      handleNameChange (evt) {
        console.log(evt)
      }
    }
}
</script>

# 列表自动完成组件

列表自动完成

展示基础的列表自动完成编辑使用场景

<title>列表自动完成</title>
<describe>展示基础的列表自动完成编辑使用场景</describe>
<template>
    <hc-grid
      id-field="id"
      :data="data"
      :editable="true"
      :edit-mode="1"
    >
      <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-autocomplete
                :fetch-suggestions="handleFetchSuggestions"
              ></hc-grid-column-autocomplete>
            </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 {
          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: '查看',
          visible: function () {
            return true
          }
        }]
      },
      nameOptions () {
        return [{
          text: '张三',
          value: '张三'
        }, {
          text: '李四',
          value: '李四'
        }, {
          text: '王五',
          value: '王五'
        }]
      }
    },
    methods: {
      handleFetchSuggestions(keywords) {
        var restaurants = this.nameOptions

        var results = keywords
          ? restaurants.filter(v => v.text.includes(keywords))
          : []
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(results)
          }, 300)
        })
      }
    }
}
</script>

# 列表日期选择组件

日期选择编辑

展示基础的列表日期选择使用场景

<title>日期选择编辑</title>
<describe>展示基础的列表日期选择使用场景</describe>
<template>
    <hc-grid
      id-field="id"
      :data="data"
      :editable="true"
      :edit-mode="1"
    >
      <hc-grid-row-toolbar :items="rowToolbar"></hc-grid-row-toolbar>
      <hc-grid-columns>
        <hc-grid-column label="日期" field="date">
           <template slot-scope="scope">
            <hc-grid-column-date-picker
                :value="scope.row.date"
                @change="handleDateChange"
              ></hc-grid-column-date-picker>
            </template>
        </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: '查看',
          visible: function () {
            return true
          }
        }]
      }
    },
    methods: {
      handleDateChange (evt) {
        console.log(evt)
      }
    }
}
</script>

# 属性及事件

# HcGridColumnTextbox属性

属性 说明 类型 可选值 默认值
editable 是否允许编辑，否时已查看模式显示文本 boolean -- true
...props 详细的配置可参考textbox -- -- --

# HcGridColumnTextbox事件

属性 说明 参数
change 当值发生改变时触发，具体参考textbox --

# HcGridColumnSpinner属性

属性 说明 类型 可选值 默认值
editable 是否允许编辑，否时已查看模式显示文本 boolean -- true
...props 详细的配置可参考spinner -- -- --

# HcGridColumnSpinner事件

属性 说明 参数
change 当值发生改变时触发，具体参考spinner --

# HcGridColumnSelect属性

属性 说明 类型 可选值 默认值
editable 是否允许编辑，否时已查看模式显示文本 boolean -- true
...props 详细的配置可参考select -- -- --

# HcGridColumnSelect事件

属性 说明 参数
change 当值发生改变时触发，具体参考select --

# HcGridColumnUpload属性

属性 说明 类型 可选值 默认值
editable 是否允许编辑，否时已查看模式显示文本 boolean -- true
allow-upload 是否允许上传文件，不允许时界面不会显示上传按钮 boolean -- true
allow-download 是否允许下载文件，不允许时界面不会显示下载链接 boolean -- true
allow-preview 是否允许预览文件，不允许时界面附件名称不会显示为超链接形式，点击也不会打开附件 boolean -- true
allow-delete 是否允许删除文件，不允许时界面不会显示删除按钮 boolean -- true
preview-watermark 是否开启水印,default表示走默认配置 string/boolean default/true/false default

# HcGridColumnautocomplete属性

属性 说明 类型 可选值 默认值
fetch-suggestions 拉取自动完成备选项数据，返回Promise异步对象 Promise<any[]> -- --
editable 是否允许编辑，否时已查看模式显示文本 boolean -- true
...props 详细的配置可参考autocomplete -- -- --

# HcGridColumnautocomplete事件

属性 说明 参数
change 当值发生改变时触发 event.value：当前值
event.text当前文本
select 用户选择备选项时触发 event.item：当前选中的项

← 标签 Tag →