uniapp table 組件

• uniapp是2019年很是的火爆的一個Dcloud開發跨平臺前端工具，支持ios android wap，小程序，除了android有點卡外，其餘暫時沒有發現什麼瑕疵。
• 最近在搗鼓uniapp項目，剛好用到table組件，以前寫了個demo，後面一直都想寫一個像樣的，能夠分享給別人用的組件。
• 本身的水平通常，開發出來的組件可能代碼不咋地，還望路過大神斧正。
• 下面是我寫的uniapptable的說明，但願可以幫到別人

這裏默認你們都很是熟悉vue和uniapp的包引入，再也不闡述uniapp組件引入方法以及uniapp組件和vue的區別

插件市場更新會比github更新延後，查看github項目

插件市場更新會比github更新延後，查看demo源碼

插件市場更新會比github更新延後，查看demo使用引入方式

支持功能大概以下

點擊查看demo,PC瀏覽器模擬顯示和真實移動設備訪問有差別

行合併

列合併

固定table高度

數據加載

數據爲空

自定義行樣式

自定義某行樣式

自定義某行某列某個單元格樣式

使用插槽自定義單元格內容

數據多選操做

數據單選操做

數據刪除&&數據編輯或者更多操做方式

固定右邊一列

固定左邊一列

固定高度不支持同時固定某一列

已測試平臺 ->ios，android，wap，微信小程序

部分效果預覽

基本使用示例源碼

html

<v-table :columns="columns" :list="data"></v-table>

javascript (data數組必須提供id)

import vTable from "@/components/table.vue"
    export default{
        components: {
            vTable
        },
        data(){
            return {
                data: [{
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        id: "1",
                        
                    }
                ],
                columns: [{
                        title: "ID",
                        key: "id"
                    },
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
            }
        }
        
    }

基本屬性

html標籤屬性

屬性	說明	類型	默認	必填
columns	列數據	Array	--	必填
dataColSpan	行數據	Array	--	必填
row-class-name	行樣式	String或Function	--	--
height	表格高度(可用固定表頭)	Number	--	--
td-height	單元格高	Number	110	--
td-width	單元格寬	Number	30	--
td-padding	單元格間距	Number	10	--
border-color	表格邊框顏色	String	#666	--
th-td-height	表頭單元格高	Number	30	--
loading	加載狀態	Boolean	false	--
selection	可選mulit和single	String	--	--
span-method	行列合併	Function	--	--
slot-cols	插槽自定義列元素,對應columns的key	Array	--	--
emptyText	插沒數據提示文字	String	--	--
emptyClickFn	沒數據點擊響應函數	Function	--	--

事件

屬性	說明	參數
@on-selection-change	單選 多選變動	{old:"",new:""}
@delete	自定義事件(它能夠不叫delete，能夠是任意事件，只要你在list裏面定義了)	{row:{},index:Number}

list 參數

屬性	說明	類型
cellClassName	設置行內某一列的樣式類名	Object
operate	數據操做的列	Object

columns 參數

屬性	說明	類型
$width	設置列寬度 例如 "120px",請務必使用px單位	String
$fixed	固定某一列，可選left和right	String
$operateList	數據操做選項和list的operate對應	Array