vue-admin-template/src/views/permissions/index.vue

<template>
  <div class="app-container">
    <div class="filter-container margin-bottom">
      <div style="width:200px;  display:inline-block; float:left">
        <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
      </div>
      <div>
        <el-select
          style="display:inline-block; float:left; margin-left:15px; width:150px"
          v-model="value1"
          placeholder="分类"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          style="display:inline-block; float:left; margin-left:15px; width:150px"
          v-model="value2"
          placeholder="格式"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          style="display:inline-block; float:left; margin-left:15px; width:150px"
          v-model="value3"
          placeholder="状态"
        >
          <el-option
            v-for="item in options3"
            :key="item.value1"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          style="display:inline-block; float:left; margin-left:15px;"
          type="primary"
          icon="el-icon-search"
        >搜索</el-button>
      </div>
      <el-button
        class="inline-block"
        type="primary"
        icon="el-icon-folder-add"
        @click="dialogFormVisible = true"
      >新建</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="名称" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属分类" width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="播放次数" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="访问量" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.traffic }}</span>
        </template>
      </el-table-column>
      <el-table-column label="格式" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="success" @click="handleModifyStatus(row,'published')">上架</el-button>
          <!-- <el-button  size="mini"  @click="handleModifyStatus(row,'draft')">下架</el-button> -->
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination  style="margin-top:50px" background layout="prev, pager, next" :total="1000"></el-pagination>

    <el-dialog title="新建资料" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="填写名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在分类" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择分类">
            <el-option label="区域一" value="区域一"></el-option>
            <el-option label="区域二" value="区域二"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件形式" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择文件形式">
            <el-option label="视频" value="视频"></el-option>
            <el-option label="音频" value="音频"></el-option>
            <el-option label="图片" value="图片"></el-option>
            <el-option label="文字" value="文字"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      tableData: [
        {
          sort: "教育",
          name: "王小虎",
          time: "2016-05-02",
          traffic:"54545",
          type:"视频",
          status:"下架",
        },
        {
          sort: "教育",
          name: "王小虎",
          time: "2016-05-02",
          traffic:"54545",
          type:"视频",
          status:"下架",
        },
        {
          sort: "教育",
          name: "王小虎",
          time: "2016-05-02",
          traffic:"54545",
          type:"视频",
          status:"下架",
        },
        {
           sort: "教育",
          name: "王小虎",
          time: "2016-05-02",
          traffic:"54545",
          type:"视频",
          status:"下架",
        },
        {
           sort: "教育",
          name: "王小虎",
          time: "2016-05-02",
          traffic:"54545",
          type:"视频",
          status:"下架",
        },
        {
           sort: "教育",
          name: "王小虎",
          time: "2016-05-02",
          traffic:"54545",
          type:"视频",
          status:"下架",
        }
      ],
      options1: [
        {
          value: "选项1",
          label: "按分类"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      options2: [
        {
          value: "选项1",
          label: "图片"
        },
        {
          value: "选项2",
          label: "音频"
        },
        {
          value: "选项3",
          label: "视频"
        },
        {
          value: "选项4",
          label: "文字"
        }
      ],
      options3: [
        {
          value: "选项1",
          label: "上架"
        },
        {
          value: "选项2",
          label: "下架"
        }
      ],
      value1: [],
      value2: [],
      value3: [],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        type: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      methods: {
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.margin-bottom {
  margin-bottom: 65px;
}
.inline-block {
  // display: inline-block;
  float: left;
  margin-left: 15px;
}
</style>