Skip to content

Latest commit

 

History

History
314 lines (275 loc) · 7.55 KB

xy-table.md

File metadata and controls

314 lines (275 loc) · 7.55 KB
Raw

xy-table

表格，基于grid的简单实现，可简单代替table。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-table.js';
</script>
<!-- 使用 -->
<xy-table thead="Name,Age,Address">
    <xy-tr>
        <xy-td>John Brown</xy-td>
        <xy-td>32</xy-td>
        <xy-td>New York No. 1 Lake Park</xy-td>
    </xy-tr>
    <xy-tr>
        <xy-td>Jim Green</xy-td>
        <xy-td>42</xy-td>
        <xy-td>London No. 1 Lake Park</xy-td>
    </xy-tr>
</xy-table>

内部仅仅根据grid布局实现，如果不满足需求或者差异太大，也可以直接使用table标签。

表头thead

thead用来规定表头的数据，格式形如Name,Age,Address

<xy-tr></xy-tr>、<xy-td></xy-td>分别对应原生<tr></tr>、<td></td>，结构用法如下

John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park 
<xy-table thead="Name,Age,Address">
    <xy-tr>
        <xy-td>Jim Green</xy-td>
        <xy-td>42</xy-td>
        <xy-td>London No. 1 Lake Park</xy-td>
    </xy-tr>
    <xy-tr>
        <xy-td>Jim Green</xy-td>
        <xy-td>42</xy-td>
        <xy-td>London No. 1 Lake Park</xy-td>
    </xy-tr>
</xy-table>

表格分配grid-template-columns

默认情况下，表格是均等分配。这里采用了grid布局，可实现通过css来控制表格分配，默认均等分配如下

xy-table{
    grid-template-columns: repeat(3,1fr); /* 1fr 1fr 1fr */
}

如需改成跟随内容自适应，可进行如下修改

John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park 
xy-table{
    grid-template-columns: auto 1fr 1fr; 
    /* 第一列自适应，剩余两项均等分配 */
}

也可改为具体数值，如下

John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park 
xy-table{
    grid-template-columns: 100px auto 1fr;
     /* 第一列100px，第二列自适应，剩余两项均等分配 */
}

以上所有规则均为grid布局规范

加载中loading

可以给表格设置loading属性，表示加载中，一般用于数据渲染

John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park 
<xy-table loading>
    ...
</xy-table>

JavaScript操作get、set

table.loading;
table.loading = false;
table.loading = true;
//原生属性操作
table.getAttribute('loading');
table.setAttribute('loading','');
table.removeAttribute('loading');

可选择select

可以设置select属性来实现一个常见的表格选择效果。

通过value可以获取到当前选中的元素的id（如果没有设置id，这返回序列）。

John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park 获取当前选中表格 
<xy-table thead="Name,Age,Address" select>
    <xy-tr id="00001">
        <xy-td>John Brown</xy-td>
        <xy-td>32</xy-td>
        <xy-td>New York No. 1 Lake Park</xy-td>
    </xy-tr>
    <xy-tr id="00002">
        <xy-td>Jim Green</xy-td>
        <xy-td>42</xy-td>
        <xy-td>London No. 1 Lake Park</xy-td>
    </xy-tr>
    <xy-tr id="00003">
        <xy-td>Jim Green</xy-td>
        <xy-td>42</xy-td>
        <xy-td>London No. 1 Lake Park</xy-td>
    </xy-tr>
    <xy-tr id="00004">
        <xy-td>Jim Green</xy-td>
        <xy-td>42</xy-td>
        <xy-td>London No. 1 Lake Park</xy-td>
    </xy-tr>
</xy-table>

JavaScript操作get

table.value;
//[id1,id2,id3]

其他

默认情况下，xy-th居中显示，xy-td为默认对齐方式，可通过justify-content:center修改对齐方式

xy-td{
    justify-content:center;
}
<style> .table-demo xy-td{ justify-content:center; } </style> John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park

可以通过grid-gap来修改表格间隙，实现内边框的效果

xy-table{
    grid-gap:1px;
}
John Brown 32 New York No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park Jim Green 42 London No. 1 Lake Park