element動態表頭,動態列

<el-checkbox
   :key="index"
   v-model="item.show"
   :label="item.label"
   v-for="(item,index) in tableHeader"
 />
<el-table
        :data="tableData"
        v-loading="loading"
        class="bgf"
        border
        header-row-class-name="lm-header-row"
        cell-class-name="lm-cell"
        style="width: 100%;"
        @selection-change="handleSelectionChange">
        <el-table-column
          :selectable="isDisabled"
          type="selection"
          width="55"/>
        <template
          v-for="(item, key) in tableHeader">
          <el-table-column
            :key="key"
            v-if="item.show && item.prop ==='realname'"
            prop="realname"
            label="姓名">
            <template slot-scope="scope">
              <span class="go" @click="goStudentInfo(scope.row)">
                {{ scope.row.realname }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :key="key"
            v-else-if="item.show && item.prop ==='huodong'"
            prop="huodong"
            label="預約體驗課">
            <template slot-scope="scope">
              <el-button v-if="scope.row.experience_status === '0'" size="mini" @click="yuyue(scope.row)">預約</el-button>
              <el-button v-else size="mini" @click="cancelyuyue(scope.row)">取消預約</el-button>
            </template>
          </el-table-column>
          <template v-else>
            <el-table-column :key="key" :prop="item.prop" :label="item.label" v-if="item.show" />
          </template>
        </template>
      </el-table>

data(){
    return{
      tableHeader: [
        {
          prop: 'realname',
          label: '姓名',
          show: true,
        }, {
          prop: 'mobile',
          label: '手機號',
          show: true,
        }, {
          prop: 'experience_num',
          label: '體驗次數',
          show: true,
        }, {
          prop: 'last_experience_time',
          label: '最近一次體驗課',
          show: true,
        }, {
          prop: 'huodong',
          label: '預約體驗課',
          show: true,
        },
      ],
      tableData: [],
    };
//下邊就是請求回來的數據賦值就可以

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章