Uni-app Component T-table table

The basic use of components for tables allows you to create simple tables that focus only on content and not on style.

This component is basically platform – wide. (Alipay, Baidu and Toutiao are theoretically supported, but there is no detailed test on these platforms)

Making address: https://github.com/mehaotian/t-table plugin market address: http://ext.dcloud.net.cn/plugin?id=413

Function highlights

• Customize global table styles
• Custom local table styles
• Table contents are customized
• Form a multiple-choice

Unrealized.

• Merged cell
• Adjust column width and row height

Results demonstrate

Call way

<template>
	<view class="warp">
		<view class="box">
			<view class="title">The default effect</view>
			<t-table @change="change">
				<t-tr>
					<t-th>The serial number</t-th>
					<t-th>The name</t-th>
					<t-th>age</t-th>
					<t-th>hobby</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">Custom styles</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">The name</t-th>
					<t-th align="left">age</t-th>
					<t-th align="left">hobby</t-th>
					<t-th align="center">operation</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)">The editor</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: 'Joe'.age: 'the'.hobby: 'swimming'
					},
					{
						id: 1.name: 'bill'.age: '21'.hobby: 'painting'
					},
					{
						id: 2.name: 'the king 2'.age: 'and'.hobby: 'boards'
					},
					{
						id: 3.name: 'code word'.age: '20'.hobby: 'bungee jumping}}; },methods: {
			change(e) {
				console.log(e.detail);
			},
			edit(item) {
				uni.showToast({
					title: item.name,
					icon: 'none'}); }}};</script>

Copy the code

t-table

Table parent, containing only the TR component

Attributes that

t-tr

Table row components contain only TH and TD components

Attributes that

t-th

Table header cell components within a table

Attributes that

t-td

Standard cell components in a table

Attributes that

Tips

• No customization, just these simple things
• If you need more complex forms, refer to the source logic, you can expand
• Do not load too much data. For example, if you have a certain number of data, such as 10, you are advised to turn pages

Update log

v1.0.0

• For the first time to submit