实现简单版的动态表格组件

动态表格

话不多说,上代码

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容