index.vue

<template>
  <d2-container class="pRelative">
    <template slot="header">
       全部商品（ 共5个 ）
    </template>
    <div class="searchs">
      <div class="buttons">
        <el-button class="button buttonlight" size="small" @click="handleAdd">添加商品</el-button>
        <el-button class="button buttondark" size="small">批量删除</el-button>
      </div>
      <!-- 搜索区 -->
      <el-form class="searchzone" :inline="true" :model="formData" label-width="auto">
        <el-form-item label="状态">
          <el-select
            size="small"
            v-model="formData.status"
            placeholder="请选择状态"
            style="width:160px;"
          >
            <el-option
              v-for="item in  statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input
            size="small"
            v-model="formData.keys"
            style="width:160px"
            placeholder="请输入关键词"
          />
        </el-form-item>
        <el-button class="button buttondark" size="small">搜索</el-button>
      </el-form>
    </div>
    <el-table :data="data"  class="list"  style="width: 100%"  empty-text="暂无商品信息" height="calc(100% - 120px)">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="商品图片"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="name" label="商品价格"></el-table-column>
      <el-table-column prop="name" label="库存"></el-table-column>
      <el-table-column prop="name" label="佣金"></el-table-column>
      <el-table-column prop="message" label="状态"></el-table-column>
      <!-- 查看详情 -->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="140"
        @selection-change="listPick">
        <template slot-scope="scope">
          <el-button type="text"  @click="">详情</el-button>
          <el-button type="text"  @click="">编辑</el-button>
          <el-button type="text"  @click="" class="listButtonRed">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-size="page.size"
      layout="total, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    <add-goods ref="addGoods"></add-goods>
  </d2-container>
</template>
<script>
  import addGoods from './components/add_goods'
  export default {
    data () {
      return {
        formData:{
          status:'',
          keys:''
        },
        statusList:[],
        data: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            forbidEdit: true,
            showEditButton: true
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            forbidEdit: false,
            showEditButton: false
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            forbidEdit: false,
            showEditButton: true
          },
        ],
        page:{
          currentPage:1,
          size:20,
          total:100
        }
      }
    },
    components:{ addGoods },
    methods: {
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      listPick() {
      },
      handleAdd(){
        this.$refs.addGoods.dialogVisible = true
      }
    }
  }
</script>
<style lang="scss">

</style>