Vable NPM | npm.io

VTable

vue.js 表格效果

使用

<!DOCTYPE html>
<html>
<head>
	<title>简单表格</title>
	<!-- 1.表格样式 -->
	<link rel="stylesheet" type="text/css" href="src/VTable.css">
	...
</head>
<body>
    <!-- 3.表格内容 -->
	<div id="show-table">
		<!-- 5.使用 VTable 组件生成表格 -->
		<v-table 
			:header="tableHeader" 
			:data="tableData"
		></v-table>
	</div>
  
    <!-- 2.VTable html 引用模板: src/template.html -->
    <script type="text/x-template" id="v-table-mod">
    ...
    </script>
  
    <script>
    // 4.实例化
    var table = new Vue({
        el: '#show-table',
        data: {
            // 表格中间内容
            tableData: {},
            // 表格的头信息,具体参考 demo
            tableHeader: {}
        },
        mounted: function () {
            var _ = this;

            // 加载数据
            $.ajax({
                url: 'mock/table.json',
                type: 'get'
            })
            .done(function(data) {
                // 赋值给表格
                _.tableData = data
            })
            .fail(function(err) {
                // 请求数据错误时
                console.error(err)
            })
        },
        methods: {
          holleEvt: function (data) {
            console.log(data)
            // data 返回以下信息
            /*
            	// 当前状态
            	status: true,
            	// 状态翻译
				statusMes: '展开',
				// 当前行信息
				tr: {
					index: 0,
					data: {...}
				},
				// 当前 td 信息
				td: {
					index: 0,
					data: {...}
				}
            */
          }
        }
    })
    </script>
</body>
</html>

引用样式表
添加组件模板（可以通过 ajax 加，参考 VTable.html）
添加你要的生成的元素
实例化对象，添加表格头等相关信息
添加组件引用 VTable

参数

主体说明

参数	说明
header	表格头信息（必填）
data	表格主体信息（必填）
left	表格左侧信息（非必填）
toggle	事件，展开收缩功能,返回状态与信息
scroll	事件，返回当前滚动条的信息，{top, left}

<v-table 
    :header="tableHeader" 
    :data="tableData"
    left="tableLeft"
    @toggle="your_toggle_Evt"
    @scroll="your_scroll_evt"
></v-table>

头部说明

参数	说明
text	显示内容
width	列宽，没有children时添加
children	子表信息
type	leftAside 侧边专用，用于突出侧边区域

// 表格头
var header = [
    {
        "text": "时间",
        "width": 400,
        "type": "leftAside"
    },
    {
        "text": "2017",
        "children": [
            {
                "text": "Q1",
                "children": [
                    {
                        "text": "1月",
                        "width": 100
                    },
                    {
                        "text": "2月",
                        "width": 100
                    },
                    {
                        "text": "3月",
                        "width": 100
                    }
                ]
            }
          ]
    }
  ]

@infinitebrahmanuniverse/nolb-vab @everything-registry/sub-chunk-3039

0.0.1

6 years ago