「uni-app 組件」 t-table 表格

時間 2019-11-07

標籤 uni app 組件 table 表格简体版

原文原文鏈接

table 表格基本使用組件，讓你製做簡單表格只須要專一內容，而不用過分專一樣式。javascript

此組件基本全平臺支持。（支付寶，百度，頭條小程序理論上都支持，可是沒有很細緻的測試這幾個平臺）html

github 地址： https://github.com/mehaotian/t-table
插件市場地址：http://ext.dcloud.net.cn/plugin?id=413vue

功能亮點java

自定義全局表格樣式
自定義局部表格樣式
表格內容自定義
表格多選

未實現git

合併單元格
調整列寬，行高

效果演示 github

調用方式

<template>
	<view class="warp">
		<view class="box">
			<view class="title">默認效果</view>
			<t-table @change="change">
				<t-tr>
					<t-th>序號</t-th>
					<t-th>姓名</t-th>
					<t-th>年齡</t-th>
					<t-th>愛好</t-th>
				</t-tr>
				<t-tr v-for="item in tableList" :key="item.id">
					<t-td>{{ item.id + 1 }}</t-td>
					<t-td>{{ item.name }}</t-td>
					<t-td>{{ item.age }}</t-td>
					<t-td>{{ item.hobby }}</t-td>
				</t-tr>
			</t-table>
		</view>
		<view class="box">
			<view class="title">自定義樣式</view>
			<t-table border="2" border-color="#95b99e" :is-check="true" @change="change">
				<t-tr font-size="14" color="#95b99e" align="left">
					<t-th align="left">姓名</t-th>
					<t-th align="left">年齡</t-th>
					<t-th align="left">愛好</t-th>
					<t-th align="center">操做</t-th>
				</t-tr>
				<t-tr font-size="12" color="#5d6f61" align="right" v-for="item in tableList" :key="item.id">
					<t-td align="left">{{ item.name }}</t-td>
					<t-td align="left">{{ item.age }}</t-td>
					<t-td align="left">{{ item.hobby }}</t-td>
					<t-td align="left"><button @click="edit(item)">編輯</button></t-td>
				</t-tr>
			</t-table>
		</view>
	</view>
</template>

<script> import tTable from '@/components/t-table/t-table.vue'; import tTh from '@/components/t-table/t-th.vue'; import tTr from '@/components/t-table/t-tr.vue'; import tTd from '@/components/t-table/t-td.vue'; export default { components: { tTable, tTh, tTr, tTd }, data() { return { tableList: [{ id: 0, name: '張三', age: '19', hobby: '游泳' }, { id: 1, name: '李四', age: '21', hobby: '繪畫' }, { id: 2, name: '王二', age: '29', hobby: '滑板' }, { id: 3, name: '碼字', age: '20', hobby: '蹦極' } ] }; }, methods: { change(e) { console.log(e.detail); }, edit(item) { uni.showToast({ title: item.name, icon: 'none' }); } } }; </script>

複製代碼

t-table

表格父組件，僅包含 tr 組件小程序

屬性說明測試

屬性名	類型	默認值	說明
border	String	1	邊框粗細
border-color	Color	#d0dee5	邊框顏色
is-check	Boolean	false	是否開啓列多選
@change	function		開啓多選生效，返回值 event = [0,1,2]

t-tr

表格行組件僅包含 th,td 組件字體

屬性說明ui

屬性名	類型	默認值	說明
font-size	String	15	行字體大小
color	Color	#3b4246	行字體顏色
align	String	center	行字體對其方式，可取值：'left' 左對齊;'center' 居中對齊;'right' 右對齊;