vue后台管理模板

<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>低耗品</el-breadcrumb-item>
      <el-breadcrumb-item>出库记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--      搜索框-->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入内容" clearable v-model="input3" @clear="clear" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!--列表表格-->
      <el-table border
                :data="recordList"
                stripe
                max-height="475"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="lodd" label="单号" width="180"></el-table-column>
        <el-table-column prop="lname" label="名称" width="180"></el-table-column>
        <el-table-column prop="lspec" label="规格" width="180"></el-table-column>
        <el-table-column prop="lunit" label="单位" width="180"></el-table-column>
        <el-table-column prop="lcount" label="库存" width="180"></el-table-column>
        <el-table-column prop="lunitPrice" label="单价" width="180"></el-table-column>
        <el-table-column prop="lmoney" label="金额" width="180"></el-table-column>
        <el-table-column prop="ltime" label="入库时间" width="180"></el-table-column>
        <el-table-column prop="lclass" label="分类" width="180"></el-table-column>
        <el-table-column prop="lremark" label="备注" width="180"></el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="180">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :enterable=false content="编辑" placement="top">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="update(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip :enterable=false effect="dark" content="领用" placement="top">
              <el-button type="warning" icon="el-icon-share" size="mini" @click="receive(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" :enterable=false content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total=this.total>
      </el-pagination>
    </el-card>
  </div>

</template>

<script>
export default {
  name: "Record",
  data() {
    return {
      total: 5,

    }
  }, methods: {}

  , mounted: {}
}
</script>

<style scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 15px;
}

.el-table {
  margin-top: 15px;
  font-size: 15px;
}


</style>