Minimalist UI

Table 表格

引入组件

<template>
  <m-table :columns="columns" :data-source="dataSource"></m-table>
</template>

<script>
  import { MTable } from "@csr/m_ui";

  export default {
    components: {
      MTable
    },
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ]
      }
    }
  }
</script>

基础用法

代码
<div>
  <m-table :columns="columns" :data-source="dataSource"></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ]
      }
    }
  }
</script>

有条纹的

代码
<div>
  <m-table :columns="columns" :data-source="dataSource" :striped="true"></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ]
      }
    }
  }
</script>

有边框的

代码
<div>
  <m-table :columns="columns" :data-source="dataSource" :bordered="true"></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ]
      }
    }
  }
</script>

loading状态

代码
<div>
  <m-table :columns="columns" :data-source="dataSource" :loading="true"></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ]
      }
    }
  }
</script>

固定头部

代码
<div>
  <m-table :columns="columns" :data-source="dataSource1" :fixedHead="true" :height="300"></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
          { key: 5, name: '胖子', age: 10, score: 80, grade: '四年级' },
          { key: 6, name: '小红', age: 17, score: 100, grade: '六年级' },
          { key: 7, name: '小绿', age: 15, score: 77, grade: '四年级' },
          { key: 8, name: '阿紫', age: 20, score: 88, grade: '五年级' },
          { key: 9, name: 'tony', age: 28, score: 78, grade: '二年级' },
          { key: 10, name: 'mark', age: 30, score: 22, grade: '三年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ]
      }
    }
  }
</script>

有序号的

代码
<div>
  <m-table :columns="columns" :data-source="dataSource" :extended-columns="extendedColumns"></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ],
        extendedColumns: [
          { field: 'index', width: 50}
        ]
      }
    }
  }
</script>

多选

代码
<div>
  <m-table
    :columns="columns" :data-source="dataSource"
    :extended-columns="extendedColumns" :selected-items.sync="selectedItems"
  ></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ],
        extendedColumns: [
          { field: 'selection', width: 50 }
        ],
        selectedItems: []
      }
    }
  }
</script>

展开行

代码
<div>
  <m-table
    :columns="columns" :data-source="dataSource"
    :extended-columns="extendedColumns"
  ></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级', description: '这是一行描述文字'},
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级', description: '这是一行描述文字' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级', description: '这是一行描述文字' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级', description: '这是一行描述文字' },
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age'},
          {title: '分数', field: 'score'},
          {title: '年级', field: 'grade'}
        ],
        extendedColumns: [
          { field: "expend", expendField: "description", width: 50 }
        ]
      }
    }
  }
</script>

排序功能

代码
<div>
  <m-table
    :columns="columns" :data-source="dataSource"
    @on-sort="onSort"
  ></m-table>
</div>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级'},
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级'},
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级'},
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级'},
        ],
        columns: [
          {title: '姓名', field: 'name'},
          {title: '年龄', field: 'age', sortType: true},
          {title: '分数', field: 'score', sortType: true},
          {title: '年级', field: 'grade'}
        ]
      }
    },
    methods: {
      onSort({ sortType, currentColumn }) {
        const field = currentColumn.field;
        this.dataSource3 = this.dataSource3.sort((a, b) => {
          // 升序
          if(sortType === 'asc') {
            return b[field] - a[field]
          }
          // 降序
          if(sortType === 'desc') {
            return a[field] - b[field]
          }
        })
    }
  }
</script>

扩展列

代码
<m-table :columns="columns2" :data-source="dataSource">
  <template v-slot:actions="slotProps">
    <m-button>编辑</m-button>
    <m-button>删除</m-button>
  </template>
</m-table>

<script>
  export default {
    data() {
      return {
        dataSource: [
          { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' },
          { key: 2, name: '小李', age: 9, score: 40, grade: '二年级' },
          { key: 3, name: '阿花', age: 12, score: 90, grade: '五年级' },
          { key: 4, name: '老王', age: 30, score: 60, grade: '六年级' },
        ],
        columns: [
          {title: '姓名', field: 'name', width: 100},
          {title: '年龄', field: 'age', width: 100},
          {title: '分数', field: 'score', width: 100},
          {title: '年级', field: 'grade', width: 150}
        ]
      }
    }
  }
</script>

API

属性说明类型默认值
columns 表头配置，必传。详情见columns表 array
extendedColumns 表头扩展配置，详情见extendedColumns表 array
dataSource 表格数据，必传。详情见columns表 array
bordered 是否展示外边框和列边框 boolean false
striped 是否展示斑马纹 boolean false
selectedItems 选中的行，支持.sync array
loading 是否开启loading状态 boolean false
fixedHead 是否开启固定表头 boolean false
height 表格高度 number

columns

列描述数据对象，是 columns 中的一项
属性说明类型默认值
title 列头显示文字 string
field 对应dataSource中需要展示的数据的key值 string
sortType 是否展示排序图标，可选值：true（展示排序图标）， asc（展示排序图标，并点亮升序图标）， desc（展示排序图标，并点亮降序图标） boolean | string
width 列宽 number

extendedColumns

扩展列描述数据对象，是 extendedColumns 中的一项
属性说明类型默认值
field 扩展列类型，可选值：index（展示序号），selection（多选类型），expend（当表格中的行需要展开时的类型） string
expendField 当表格中的行需要展开时需要该属性，值为展开行的key值 string
width 扩展列的宽度 string

dataSource

表格数据
属性说明类型默认值
key 当前行的标识，值唯一。必传 string | number

事件

事件名 说明 回调参数
on-change 选择行时触发 { selected: '是否选中, 类型boolean', selectedItems: '选中的行，类型array'}

actions slot

actions 插槽是一个带有slot-scope 特性的插槽，接收的 prop 对象中提供 了一个item对象，以上面的例子说明，第一行中的item对象就是： { key: 1, name: '阿豆', age: 10, score: 100, grade: '三年级' }

← Upload 上传 →