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=" 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)
},