Table 表格

表格组件，支持表格内容上下左右滚动。

代码演示

基础用法

通过dataSource设置表格数据。

<hd-table :dataSource="dataList">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>

export default {
  data() {
    return {
      dataList: [
        {
          name: '赵云',
          school: '武汉市阳逻妇幼保健学院',
          major: '计算机科学与技术专业'
        },
        {
          name: '孔明',
          school: '武汉市阳逻卧龙学院',
          major: '计算机科学与技术专业'
        }
        {
          name: '刘备',
          school: '武汉市阳逻编织学院',
          major: '计算机科学与技术专业'
        }
      ]
    }
  }
}

斑马纹

通过stripe设置表格是否展示斑马纹，默认false(不展示)。

<hd-table :dataSource="dataList" :stripe="stripe">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>

export default {
  data() {
    return {
      dataList: [
        {
          name: '赵云',
          school: '武汉市阳逻妇幼保健学院',
          major: '计算机科学与技术专业'
        },
        {
          name: '孔明',
          school: '武汉市阳逻卧龙学院',
          major: '计算机科学与技术专业'
        }
        {
          name: '刘备',
          school: '武汉市阳逻编织学院',
          major: '计算机科学与技术专业'
        }
      ],
      stripe: true
    }
  }
}

表格高度

通过height设置表格高度，默认为80vh。

<hd-table :dataSource="dataList" :height="height">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>

export default {
  data() {
    return {
      dataList: [
        {
          name: '赵云',
          school: '武汉市阳逻妇幼保健学院',
          major: '计算机科学与技术专业'
        },
        {
          name: '孔明',
          school: '武汉市阳逻卧龙学院',
          major: '计算机科学与技术专业'
        }
        {
          name: '刘备',
          school: '武汉市阳逻编织学院',
          major: '计算机科学与技术专业'
        }
      ],
      height: '90vh'
    }
  }
}

排序事件

当存在列参与排序时，点击会触发sort-method排序事件。

<hd-table :dataSource="dataList" @sort-method="doSort">
  <hd-table-column prop="name" label="姓名"></hd-table-column>
  <hd-table-column prop="school" label="求学之所" :sortable="true"></hd-table-column>
  <hd-table-column prop="major" label="专业"></hd-table-column>
</hd-table>

export default {
  data() {
    return {
      dataList: [
        {
          name: '赵云',
          school: '武汉市阳逻妇幼保健学院',
          major: '计算机科学与技术专业'
        },
        {
          name: '孔明',
          school: '武汉市阳逻卧龙学院',
          major: '计算机科学与技术专业'
        }
        {
          name: '刘备',
          school: '武汉市阳逻编织学院',
          major: '计算机科学与技术专业'
        }
      ]
    }
  },
  methods: {
    doSort(e) {
      console.log('这里是排序事件')
    }
  }
}

Props

Name	Description	Type	Required	Default
dataSource	table数据源	Array	false	[]
stripe	是否为斑马纹	Boolean	false	false
height	表格高度	String	false	默认值：'80vh'

Events

Event Name	Description	Parameters
sort-method	点击排序时触发	value:Object 当前列表头

Slots

Name	Description	Default Slot Content
default	-	-