动态表格

话不多说，上代码

//父组件
import tables from 'commons/commonPage/Tables'
<!-- 表格 -->
        <tables :tableData='tableData'></tables>

//子组件
<div class="tables">
    <table callpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th v-for="(v,i) in theadList" :key="i">{{v}}</th>  //动态头部
        </tr>
      </thead>

      <tbody>
        <tr
          v-for="(v, i) in tableData"
          :key="i"
          :class="i % 2 == 0 ? 'even' : ''"
        >
          <td v-for="(z,j) in theadList.length" :key="j">  //动态表格主体
            <span>{{thead[j] == Object.keys(tableData[0])[j] ? v[thead[j]] : '--'}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

export default {
  data() {
    return {
      theadList: [],
      thead:[]
    };
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  created(){
    this.disposeThead(this.tableData[0])
  },
  methods: {
    // 处理头部数据，根据传入的数据，判断显示几条数据
    disposeThead(theads) {
      this.thead = Object.keys(theads)
      this.thead.forEach((v,i) => {
        let string = ''
        v.split('').forEach((z,j) => {
          let str = z.charCodeAt();   //转换成Ascll
          if (str >= 65 && str <= 90) {
            string += z;
          }else if (str >= 97 && str <= 122) {
            string += z.toUpperCase();
          }else {
            string += z;
          }
        })
        this.theadList.push(string)
      })
      // this.theadList = thead
    },
  },
};

现在主要是处理一维数组，后续会完善！感谢提宝贵意见！