table 表格基本使用組件，讓你制作簡單表格只需要專注內容，而不用過度專注樣式。

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

功能亮點

自定義全局表格樣式

自定義局部表格樣式

表格內容自定義

表格多選

未實現

合并單元格

調整列寬，行高

效果演示

WX20190518-141534@2x.png

調用方式

默認效果

序號

姓名

年齡

愛好

{{ item.id + 1 }}

{{ item.name }}

{{ item.age }}

{{ item.hobby }}

自定義樣式

姓名

年齡

愛好

操作

{{ item.name }}

{{ item.age }}

{{ item.hobby }}

編輯

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'

});

}

}

};

t-table

表格父組件，僅包含 tr 組件

屬性說明

屬性名

類型

默認值

說明

border

String

1

邊框粗細

border-color

Color

#d0dee5

邊框顏色

is-check

Boolean

false

是否開啟列多選

@change

function

開啟多選生效，返回值 event = [0,1,2]

t-tr

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

屬性說明

屬性名

類型

默認值

說明

font-size

String

15

行字體大小

color

Color

#3b4246

行字體顏色

align

String

center

行字體對其方式，可取值：'left' 左對齊;'center' 居中對齊;'right' 右對齊;

t-th

表格內的表頭單元格組件

屬性說明

屬性名

類型

默認值

說明

align

String

center

行字體對其方式，可取值：'left' 左對齊;'center' 居中對齊;'right' 右對齊;

t-td

表格中的標準單元格組件

屬性說明

屬性名

類型

默認值

說明

align

String

center

行字體對其方式，可取值：'left' 左對齊;'center' 居中對齊;'right' 右對齊;

Tips

不提供定制，僅有這些簡單內容

如需更復雜表格，參考源碼邏輯，可自行擴展

不建議加載過多數據，如到一定數據，比如 10 條，建議制作翻頁

更新日志

v1.0.0

初次提交

總結

以上是生活随笔為你收集整理的uni开发中可以用table标签么_「uni-app 组件」t-table 表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。