V3-simple-table NPM

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