更新记录

1.2.0（2023-12-21） 下载此版本

1.新增表头（列）合并。

1.0.2（2023-12-16） 下载此版本

修复组件内部获取单元格数据方式。

1.0.1（2023-12-16） 下载此版本

1.增加插槽（小程序不支持）功能。

平台兼容性

使用

import XTable from "@/components/x-table/x-table.vue";

<ETable
  :columns="columns"
  :dataSource="dataSource"
>

  <template v-slot:index="{record,text,index}">
    <view :style="{backgroundColor:'#71d5a1',color:'#fff'}">{{ index + 1}}</view>
  </template>

  <template v-slot:typeName="{record,text,index}">
    <view :style="{color:'#f29100'}">{{text}}</view>
  </template>

  <template v-slot:action="actionProps">
    <u-button size="mini" type="error">删除</u-button>
  </template>

</ETable>

展示

参数

columns

列描述对象，是 columns 中的一项

注: 小程序不支持作用域插槽。

columns = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 80,
    scopedSlots: {
      customRender: "index",
    },
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    colSpan: 2,
  },
  {
    title: "功率(kWh)",
    dataIndex: "power",
    key: "power",
    colSpan: 0,
  },
  {
    title: "型号",
    dataIndex: "modelName",
    key: "modelName",
  },
  {
    title: "类型",
    dataIndex: "typeName",
    key: "typeName",
    width: 80,
    scopedSlots: {
      customRender: "typeName",
    },
  },
  {
    title: "操作",
    width: 320,
    scopedSlots: {
      customRender: "action",
    },
  },
];

dataSource

数据源

dataSource = [
    {
      key: '1',
      name:'定速1'
      modelName: '32#',
      power:0.74,
      typeName: '定速1',
    },
    {
      key: '2',
      name:'定速2'
      power:0.9,
      modelName: '33#',
      typeName: '定速1',
    },
]

bordered

边框

tableStyle

表格样式

例子

tableStyle = {
  width: "300rpx",
  height: "400rpx",
};

rowStyle

行样式

注：禁止设置影响盒模型的样式（width/height/border 等）

例子

rowStyle = {
    color:'red',
    backgroundColor:'blue'
    odd:{
      color:'green', // 优先级高于前面设置的 red
      fontSize:'20rpx',
    },
    even:{
      backgroundColor:'green', // 优先级高于前面设置的 blue
    }
}

headStyle

表头样式

注：禁止设置影响盒模型的样式（width/height/border 等）

例子

headStyle = {
  color: "red",
  backgroundColor: "blue",
};

scroll

滚动

注：此处设置的是滚动条的尺寸，而非表格的尺寸。

例子

scroll = {
  x: 1000,
  // y:1000,
};