Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

使用方法

安装

  npm i v3-simple-table

引入

  import MobileTable from 'v3-simple-table'

样式

  import 'v3-simple-table/dist/style.css'

绑定

  const import App from './App.vue';
  app = createApp(App); 
  app.use(MobileTable);

应用

  <mobile-table :columns="state.columns" :data="state.tableData" max-height="400px" :stripe="true" border
    highlight-current-row  cell-class-name="ccc" empty-text="暂无数据" :has-children="true" row-key="id" :expand-row-keys="[3]">
  </mobile-table>

columns 和 tableData

  const state = reactive({
    columns: [
      {
        prop: 'date',
        label: '日期',
        width: '140px',
        fixed: true,
        sortable: true
      },
      {
        prop: 'name',
        label: '姓名阿诗丹顿阿达萨达阿诗丹顿啊',
        width: '200'
      },
      {
        prop: 'address',
        label: '地址',
        width: '',
        sortable: true,
        bodyRender: function (item) {
          return `<div>123123123${item.label}</div>`
        }
      },
      {
        prop: 'control',
        label: '操作',
        width: '',
        btns: [
          {
            style: {},
            text: '编辑',
            className: '',
            onClick: function (data, column) {
              console.log("abc", data, column);
            }
          }
        ],
      }
    ],
    tableData: [{
      id: 1,
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      id: 2,
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      id: 3,
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄',
      children: [{
        id: 33,
        date: '2016-05-01',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [
          {
            id: 35,
            date: '2016-05-01',
            name: '王小虎111',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ]
      }, {
        id: 32,
        date: '2016-05-01',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }, {
      id: 4,
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄',
      children: [
        {
          id: 31,
          date: '2016-05-01',
          name: '王小虎111',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ]
    }],
  });

参数说明

表格参数 |说明 |类型 |可选值 |默认值 | --- | --- | --- | --- | --- | data |显示的数据 |array |— |— | height |Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 |string/number |— |— | max-height |Table 的最大高度。合法的值为数字或者单位为 px 的高度。 |string/number |— |— | stripe| 是否为斑马纹| table| boolean| — |false| border |是否带有纵向边框 |boolean |— |false| highlight-current-row| 是否要高亮当前行| boolean| —| false| row-class-name |行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 |Function({row, rowIndex})/String |— |—| row-style |行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 |Function({row, rowIndex})/Object |— |—| cell-class-name| 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。| Function({row, column, rowIndex, columnIndex})/String| — |—| cell-style |单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 |Function({row, column, rowIndex, columnIndex})/Object| — |—| header-row-class-name |表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 |Function({row, rowIndex})/String |— |—| header-row-style |表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 |Function({row, rowIndex})/Object |— |—| header-cell-class-name |表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 |Function({row, column, rowIndex, columnIndex})/String |—| —| header-cell-style |表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 |Function({row, column, rowIndex, columnIndex})/Object |— |—| empty-text |空数据时显示的文本内容，也可以通过 slot="empty" 设置 |String |— |暂无数据| default-expand-all |是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 |Boolean| —| false| expand-row-keys |可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 |Array |—| | only-arrow-click|是否只通过点击箭头展开行。|Boolean|true|false| sort-arrow-position|排序的上下箭头位置|String|right|-|

列参数 |说明 |类型 |可选值 |默认值 | --- | --- | --- | --- | --- | type| 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算） |string |selection/index |—| label| 显示的标题| string| —| —| prop| 对应列内容的字段名，也可以使用 property 属性| string| —| —| width| 对应列的宽度| string| —| —| min-width| 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列| string| —| —| fixed| 列是否固定在左侧或者右侧，true 表示固定在左侧| string, boolean| true, left, right| —| sortable| 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件| boolean, string| true, false, 'custom'| false|

浏览器支持

| | | | --- | --- | --- | --- | --- | 80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ |