html移动端表格插件,移动端类table组件封装

简介

一个不怎么高度自定义的移动端table组件，可创建不定数量的列的table(自己写着玩为了以后维护修改样式方便封装起来的

实现思路表格头部一个循环：循环渲染每一列的列名

表格内容两重循环：外层循环渲染行，内层循环渲染每一行的每一列的内容

实现

环境：vue + vantui，用van-row + van-col模拟行和列// 封装的table组件

export default {

props: {

headData: {

type: Array,

default: () => []

},

bodyData: {

type: Array,

default: () => []

}

},

methods: {

doThis(e, rowIdx) {

if(e.target.id === 'edit') {

this.$emit('edit', rowIdx)

}

else if(e.target.id === 'delete') {

this.$emit('delete', rowIdx)

}

}

}

}

@inputPaddingLeft: 5px;

@colPaddingLeft: 10px;

.fake-table /deep/ .van-field__control {

padding-left: @inputPaddingLeft;

}

.col /deep/ .van-cell {

padding: 0;

}

.col /deep/ .input-diabled {

border: none;

}

.col /deep/ .input-abled {

border: 1px solid #DDDDDD;

}

.table-col {

height: 100%;

display: flex;

justify-content: flex-start;

align-items: flex-start;

font-family: PingFangSC-Medium, PingFang SC;

color: #313131;

}

.fake-table {

margin: 0 12px;

&__head, &__body {

border: 1px solid #DDDDDD;

&:not(:last-child) {

border-bottom: none;

}

}

&__head {

height: 40px;

background: #F5FAFF;

.col:extend(.table-col) {

font-size: 14px;

font-weight: 500;

line-height: 20px;

padding: @colPaddingLeft;

}

}

&__body {

.col:extend(.table-col) {

font-size: 13px;

font-weight: 400;

line-height: 18px;

padding: @colPaddingLeft @colPaddingLeft @colPaddingLeft calc(@colPaddingLeft - @inputPaddingLeft);

&:last-child {

padding-left: @inputPaddingLeft;

}

}

}

}

使用// 父组件

// html

// script

import fakeTable from '../../components/fake-table'

// ...省略一些代码

data {

return {

tableHead: [{

name: '材料名称', // 注意传进去的列名

span: '8',

prop: 'name' // 注意传进去的列属性名，要跟实际取得的数据的属性名一致，如matirialUsed数组的每一项的属性名

},

{

name: '型号',

span: '6',

prop: 'model'

},

{

name: '数量',

span: '5',

prop: 'num'

},

{

name: '操作',

span: '5',

prop: ''

}],

matirialUsed: [{

name: '',

model: '',

num: '0',

editDisable: true, // 是否可编辑

},

{

name: '',

model: '',

num: '0',

editDisable: true,

},

{

name: '',

model: '',

num: '0',

editDisable: true,

},

{

name: '',

model: '',

num: '0',

editDisable: true,

}]

}

},

components: {

fakeTable

},

methods: {

editMatirial(idx) {

let flag = this.matirialUsed[idx]['editDisable']

this.$set(this.matirialUsed[idx], 'editDisable', !flag)

},

deleteMatirial(idx) {

let temp = this.matirialUsed

temp.splice(idx, 1)

this.matirialUsed = temp

},

}