diff --git a/miniprogram/pages/components/cf-table/cf-table.json b/miniprogram/pages/components/cf-table/cf-table.json new file mode 100644 index 0000000..4bbe8d9 --- /dev/null +++ b/miniprogram/pages/components/cf-table/cf-table.json @@ -0,0 +1,6 @@ +{ + "component": true, + "styleIsolation": "shared", + "usingComponents": {} +} + diff --git a/miniprogram/pages/components/cf-table/cf-table.ts b/miniprogram/pages/components/cf-table/cf-table.ts new file mode 100644 index 0000000..8ba9f15 --- /dev/null +++ b/miniprogram/pages/components/cf-table/cf-table.ts @@ -0,0 +1,39 @@ +Component({ + options: { addGlobalClass: true, multipleSlots: true }, + /** + * 组件的属性列表 + */ + properties: { + data: { + type: Array, + value: [], + }, + columns: { + type: Array, + value: [], + }, + maxHeight: { + type: String, + value: "auto", + }, + useTheadSlot: { + type: Boolean, + value: false, + }, + useTbodySlot: { + type: Boolean, + value: false, + }, + }, + + /** + * 组件的初始数据 + */ + data: {}, + + /** + * 组件的方法列表 + */ + methods: {}, +}); + diff --git a/miniprogram/pages/components/cf-table/cf-table.wxml b/miniprogram/pages/components/cf-table/cf-table.wxml new file mode 100644 index 0000000..df8e3bf --- /dev/null +++ b/miniprogram/pages/components/cf-table/cf-table.wxml @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + {{item.title}} + + + + + + + + + + + + + + + + + + + {{record[item.dataIndex]}} + + + + + + +暂无数据 + diff --git a/miniprogram/pages/components/cf-table/cf-table.wxss b/miniprogram/pages/components/cf-table/cf-table.wxss new file mode 100644 index 0000000..8d6a4fa --- /dev/null +++ b/miniprogram/pages/components/cf-table/cf-table.wxss @@ -0,0 +1,71 @@ +.table-box { + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + border-bottom: 1px solid #ddd; + overflow: auto; +} + +.table { + display: table; + table-layout: fixed; + box-sizing: border-box; + width: 100%; +} + +.table-column-group { + display: table-column-group; +} + +.col { + display: table-column; +} + +.thead { + position: sticky; + top: 0; + z-index: 1; + background: #f5f5f5; +} + +.tr { + display: table-row; +} + +.th { + background-color: #f5f5f5; +} + +.th, +.td { + display: table-cell; + border-bottom: 1px solid #ddd; + padding: 4px; + border-right: 1px solid #ddd; + vertical-align: middle; +} + +.tr .th { + border-top: 1px solid #ddd; +} + +.tr .th:last-child, +.tr .td:last-child { + border-right: none; +} + +.table-sticky { + position: sticky; + top: 0; + z-index: 1; +} + +.table-content .tr:last-child .td { + border-bottom: none; +} + +.empty-data { + text-align: center; + margin-top: -33px; + line-height: 30px; + color: #999; +}