vue+elementUI table篇

1.table內容展示

<el-table stripe :key='tableKey' header-cell-class-name="bindonce" :data="tableList" v-loading="listLoading" element-loading-text="列表正在加載中" border fit highlight-current-row
      style="width: 100%;" @selection-change="selectionChange">
      <el-table-column align="center" type="selection" width="55px"></el-table-column>

      <el-table-column align="center" :label="'會員卡名稱'" width="150" sortable prop="scope.row.name">
        <template slot-scope="scope">
          <span v-text="scope.row.name"></span>
        </template>
      </el-table-column>
      
      <el-table-column align="center"  :label="'會員卡類型'" width="120" prop="scope.row.type" 
      :filters="[{text: '全部', value: 0},{text: '時效卡', value: 1}, {text: '次卡', value: 2}]"
      :filter-method="filterType" filter-placement="bottom-end" :filter-multiple="false">
        <template slot-scope="scope">
          <span>{{scope.row.type === 1 ? '時效卡' : '次卡'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="'總時間/次數'" width="150" sortable prop="scope.row.times">
        <template slot-scope="scope">
          <span>{{ scope.row.type===1 ? scope.row.times + '天' : scope.row.times + '次'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="'價格(元)'" width="150" sortable prop="scope.row.price">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" :label="'底價(元)'" width="150" sortable prop="scope.row.floor_price">
        <template slot-scope="scope">
          <span>{{scope.row.floor_price}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="'APP狀態'" width="150" sortable prop="scope.row.app_status">
        <template slot-scope="scope">
          <span>{{scope.row.app_status === 1? '下架':'上架'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="'SAAS狀態'" width="150" sortable prop="scope.row.saas_status">
        <template slot-scope="scope">
          <span>{{scope.row.saas_status === 1? '下架' : '上架'}}</span>
        </template>
      </el-table-column>

      <el-table-column width="150px" align="center" :label="'會員卡圖標'">
        <template slot-scope="scope">
          <span><img :src="scope.row.photo" @click="common.bigImg($event)" alt="icon" width="30" height="30" style="margin-left:50px;display: list-item;border-radius:50%;"></span>
        </template>
      </el-table-column>

      <el-table-column width="200px" align="center" label="創建時間<i class='el-icon-date'></i>" sortable prop="scope.row.created_at">
        <template slot-scope="scope">
          <span>{{scope.row.created_at}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" :label="$t('table.actions')" min-width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-dropdown trigger="click">
            <el-button size="mini" type="danger" plain>刪除</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleDelete(scope.$index, tableList)">確定</el-dropdown-item>
              <el-dropdown-item>取消</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

2.編輯

handleEdit(index, row) {
      this.subStatus = 'edit_' + index
      this.formData = Object.assign({}, row)
      this.DialogVisible = true
      this.add_edit = true
      this.$nextTick(() => {
        this.$refs.imgbox.setImg(row.photo)
      })
    },

editsubmit() {
      let self = this
      this.$refs.formbox.validate(valid => {
        if (valid) {
          self.loading = true
          editVipCard(self.formData).then(response => {
            self.loading = false
            self.DialogVisible = false
            let index = self.subStatus.split('_')[1]
            self.$set(self.tableList, index, response.data)
            // this.getList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

3.刪除

handleDelete(index, rows) {
      deleteVipCard(rows[index].id).then(res => {
        rows.splice(index, 1)
      }).catch(() => {
        this.common.Message('error', '刪除失敗！')
      })
    }

4.table中使用checkbox，判斷選中狀態

在table中加入@selection-change="selectionChange"

// 點擊checkbox獲得對應id
selectionChange(selection) {
   this.groupOprate.ids = []
   for (let i = 0; i < selection.length; i++) {
      this.groupOprate.ids.push(selection[i].id)
   }
   console.log(this.groupOprate.ids)
},