vue管理系统展示数据模板

<template>
  <div>

    <el-table :data="tableData" border stripe>
      <el-table-column label="名称" prop="title"></el-table-column>

      <el-table-column label="分类" prop="category"></el-table-column>
      <el-table-column label="品牌" prop="brand"></el-table-column>
      <el-table-column label="可出售"       prop="saleable"     >
        <template slot-scope="scope">
<!--          {{scope.row}}-->
          <el-switch v-model="scope.row.saleable" active-valuee="1" inactive-value="0"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="上次更新时间" prop="lastUpdateTime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--    修改按钮      -->
          <el-tooltip effect="dark" content="查看品牌详细商品信息" placement="top">
            <el-button type="primary"  size="mini" icon="el-icon-view"></el-button>
          </el-tooltip>
          <el-button type="danger"   size="mini" icon="el-icon-delete"></el-button>
           <el-tooltip effect="dark" content="修改商品信息" placement="top">
             <el-button type="warning"  size="mini" icon="el-icon-setting"></el-button>
           </el-tooltip>
        </template>
      </el-table-column>

    </el-table>
<!--    分页-->
    <el-pagination

      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "ShopInfo",
    data() {
      return {
        //获取用户列表的数据
        queryInfo: {
          page: 1,
          size: 5
        },
        tableData: [{
          lastUpdateTime: '2016-05-02',
          title: '小米9',
          saleable: '1',
          category: '手机',
          brand: '小米'

        }],

      }
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped>

</style>