elementui动态设置table表格的data数组以及参数名等

EstherNi

已于 2024-02-28 15:40:38 修改

阅读量442

点赞数 2

文章标签： elementui 前端 javascript

于 2024-02-28 15:39:52 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/136347721

版权

在这里插入图片描述

父组件
<rightTable :paramObject="paramObj" v-if="paramObj"></rightTable>

父组件声明
paramObj: {
        tableData: [
          { aa: 1, bb: 2 },
          { aa: 2, bb: 4 },
        ],
        paramArray: [
          {
            param: "aa",
            label: "企业名称",
          },
          {
            param: "bb",
            label: "行政区划",
          },
        ],
        totalCount: 2,
      },

子组件
  <div class="list">
      <el-table :data="paramObject.tableData" border style="width: 100%;">
        <!-- 空状态 -->
        <template slot="empty">
          <div class="empty-box" :style="{borderRight:paramObject.tableData.length==0?'1px solid #dee5ef':''}">
            <div class="pic"><img src="@/assets/images/noData.png" /></div>
            <span>暂无数据</span>
          </div>
        </template>
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <template v-for="(item,index1) in paramObject.paramArray">
          <el-table-column :key="index1 + Math.random()" v-if="true" :label="item.label">
            <template slot="header">
              <div class="header-con" v-if="item.label.slice(-1)=='）'">（uSv/h）</div>
              <div class="header-name">{{ item.label.slice(-1)=='）'?item.label.slice(0,-8):item.label }}</div>
            </template>
            <template slot-scope="{row}">
              <div style="text-align: center;">{{ row[item.param] }}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background align="center" :total="paramObject.totalCount" :pager-count="5" @current-change="handleCurrentChange" :current-page="query.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="query.pageSize" layout=" prev, pager, next">
      </el-pagination>
    </div>

子组件声明
 props: {
    paramObject: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      query: {
        pageNum: 1,
        pageSize: 15,
      },
    };
  },
  watch: {
    "paramObject.paramArray"(newVal, oldVal) {
      console.log("dd:", newVal, oldVal);
    },
    "paramObject.tableData"(newVal, oldVal) {
      console.log("123dd:", newVal, oldVal);
    },
  },
   methods: {
    // 当前为第几页
    handleCurrentChange(val) {
      this.query.pageNum = val;
      // this.getList();
    },
  },