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)

},