移动端类table组件封装

简介

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

实现思路

• 表格头部一个循环：循环渲染每一列的列名
• 表格内容两重循环：外层循环渲染行，内层循环渲染每一行的每一列的内容

实现

环境：vue + vantui，用van-row + van-col模拟行和列

// 封装的table组件

使用

// 父组件
// 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
    },  
}