鍍金池/ 問(wèn)答/Python  HTML/ VUE element el-table 怎么按后臺(tái)數(shù)據(jù)排列列的順序

VUE element el-table 怎么按后臺(tái)數(shù)據(jù)排列列的順序

1.表格列要求可以根據(jù)從后臺(tái)請(qǐng)求到的數(shù)據(jù)指定顯示的列、列寬、順序
2.<div class="table-div-warp">

  <el-table ref="multipleTable" :data="tableData" stripe size="mini" resizable border
            style="width: 100%" :height="tableHeight">
    <el-table-column :label="'Quote_001' | localesFilter " prop="partnerCompanyName"
                     show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_002' | localesFilter " prop="transType" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_003' | localesFilter " prop="destName" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_004' | localesFilter " prop="goodsTypeName" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_005' | localesFilter " prop="packingType"
                     show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_006' | localesFilter " prop="weight" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_007' | localesFilter " prop="vol" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_008' | localesFilter " prop="unitPrice" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_009' | localesFilter " prop="carriage" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_010' | localesFilter " prop="totalPrice"
                     show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_011' | localesFilter " prop="designFormulas"
                     show-overflow-tooltip></el-table-column>
    <el-table-column :label="'Quote_012' | localesFilter " prop="timeLimit" show-overflow-tooltip></el-table-column>
    <el-table-column :label="'ORDERS_46' | localesFilter " prop="designFormulas" align="center">
      <template slot-scope="scope">
        <el-button style="min-width:30px;padding: 3px 5px;" @click="placeOrder(scope.row)">{{'BTN_012' | localesFilter}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>

3.這些表頭都是先定義好,可以通過(guò)判斷來(lái)是否顯示,但是做不到動(dòng)態(tài)顯示指定列啊
4.
clipboard.png

回答
編輯回答
孤慣

<el-table-column v-for="item in data" :width='item.width' ></el-table-column>你可以通過(guò)data控制列、列寬、順序

2017年11月1日 04:39
編輯回答
尛曖昧

我先試試。大佬

2018年6月22日 23:40