# Table 表格

用于展示多条结构类似的数据。

目前只实现了最基本的数据功能，和 ElementUI 尚有些差距，后期慢慢迭代。

# 基础用法

基础的表格展示用法。

<template>
    <div style="display: flex; align-items: center;justify-content: center;width: 100%; margin-top: 8px; margin-bottom: 16px">
        <wu-plus-table
                checkbox="true"
                stripe="false"
                border="true"
                compact="false"
                data='[{"id":1,"name":"xwang","age":18,"address":"是是是"}]'
                columns='[{"title":"ID","key":"id","align":"center"},{"title":"Name","align":"center","key":"name"},{"title":"age","key":"age"},{"title":"address","key":"address"}]'
        ></wu-plus-table>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: [{"id":1,"name":"xwang","age":18,"address":"是是是"}],
                columns: [{"title":"ID","key":"id", "align": "center"},{"title":"Name", "align": "center", "key":"name"},{"title":"age","key":"age"},{"title":"address","key":"address"}]
            }
        },
        methods: {
            
        }
    }
</script>
Expand Copy

# 自定义渲染

通过 render 实现自定义节点渲染，需要依赖 webCorePlus.h 实现，参考案例代码。

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;width: 100%; margin-top: 8px; margin-bottom: 16px">
        <wu-plus-table
                id="tableRef3"
                checkbox="true"
                stripe="false"
                border="true"
                compact="false"
                data="[]"
                columns="[]"
        ></wu-plus-table>

    </div>
</template>
<script>
    const editFun = (item, item1) => {
        console.log(item)
        console.log(item1)
    }
    const deleteFun = (item, item1) => {
        console.log(item)
        console.log(item1)
    }
    export default {
        data() {
            return {
            }
        },
        mounted() {
            const tableRef2 = document.getElementById("tableRef3");
            const columns = [
                { "title":"ID","key":"id","width":"80px", "align": "center" },
                { "title":"Name", "align": "center", "key":"name","width":"120px" },
                { "title":"age","key":"age","width":"120px" },
                { "title":"address","key":"address","width":"120px" },
                { "title": "操作", "width":"120px", "align": "center",
                    render: (item) => {
                        return webCorePlus.h('div', null, [
                            webCorePlus.h(
                                    'wu-plus-button', { size: "mini", type: "primary", style: { color: "blue", cursor: "pointer"}, onclick: (item1) => editFun(item, item1)}, '编辑'
                            ),
                            webCorePlus.h(
                                    'wu-plus-button', { size: "mini", type: "danger", style: { color: "blue", marginLeft: "8px", cursor: "pointer"}, onclick: (item1) => deleteFun(item, item1)}, '删除'
                            )
                        ])
                    }
                }
            ]
            const list = [
                {
                    "id":1,
                    "name":"xwang",
                    "age":18,
                    "address":"此处"
                },
                {
                    "id":2,
                    "name":"xwawwng",
                    "age":182,
                    "address":"急急急"
                },
                {
                    "id":3,
                    "name":"xwawwng",
                    "age":182,
                    "address":"以i"
                }
            ]
            this.$nextTick(() => {
                tableRef2.setAttribute('data', list)
                tableRef2.setAttribute('columns', columns)
            })


        }
    }
</script>
Expand Copy

# 多选

选择多行数据时使用 Checkbox。

<template>
    <div style="display: flex; align-items: center;justify-content: center;width: 100%; margin-top: 8px; margin-bottom: 16px">
        <wu-plus-table
                checkbox="true"
                stripe="false"
                border="true"
                compact="false"
                :data=data
                :columns="columns"
        ></wu-plus-table>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                data: [{"id":1,"name":"xwang","age":18,"address":"是是是"}, {"id":2,"name":"xwang","age":18,"address":"是是是"}, {"id":3,"name":"xwang","age":18,"address":"是是是"}, {"id":4,"name":"xwang","age":18,"address":"是是是"}],
                columns: [{"width":"20px", "align": "center", "type": "selection"},{"title":"ID","key":"id", "align": "center"},{"title":"Name", "align": "center", "key":"name"},{"title":"age","key":"age"},{"title":"address","key":"address"}]
            }
        },
        methods: {

        }
    }
</script>
Expand Copy

# Attributes

参数 说明 类型 可选值 默认值
data 组件数据 any[] 表格数据 []
columns 列配置 Column[] 符合 Column 的集合 []
border 是否有边框 Boolean false、true false
width 宽度 String -- 'auto'
height 高度 String -- 'auto'

# Event

事件名 说明 参数
selection-all 当用户手动勾选全选 Checkbox 时触发的事件 (event: CustomEvent) => void
cell-click 当某个单元格被点击时会触发该事件 (event: CustomEvent) => void
selection-change 复选框行选择 (event: CustomEvent) => void

# Column Attributes

参数 说明 类型 可选值 默认值
type 列类型 ColumnEnums 'selection'、'index'、'' ''
title 列名称, 类似 ElementUI 的 label String -- --
key key 类似 ElementUI 的 prop String -- --
width 宽度 String -- --
align 对齐方式 String 'left'、'right'、'center' 'left'

Badge 标记