notify.vue

<!--通知-->
<template>
  <div class="idxs">
    <div style="height:1000px;margin-right: 500px;margin-left: 0px /* 设置容器高度为视口高度 */;overflow: hidden">
      <div style="width: 1400px;height: 1000px;position: absolute;">
        <div>
          <el-page-header @back="goBack" content="系统消息"></el-page-header>
        </div>
        <br>
        <!--卡片 -->
        <el-card style="height: 1000px">
          <!--让编辑按钮处于一行的右侧-->
          <div style="display: flex; justify-content: space-between;">
            <span>全部消息</span>
          </div>
          <!--分隔行-->
          <el-divider content-position="right"></el-divider>

          <!--表格组件-->
          <el-table @click="f()"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column class="aaa"
                             type="selection"
                             width="55">
            </el-table-column>
            <el-table-column class="aaa"
                             label="日期"
                             width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column class="aaa"
                             prop="title"
                             label="标题"
                             width="120">
            </el-table-column>
            <el-table-column class="aaa"
                             prop="content"
                             label="内容"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px" v-show="this.deleate">
            <el-button><i class="el-icon-delete"></i></el-button>
          </div>


        </el-card>
        </div>
      </div>
    </div>
</template>

<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";

export default {
  name: "notify",
  components: {Sidebar, Handder},
  data() {
    return {
      size: "200",
      avatarUrl: "",
      tableData: [{
        date: '2016-05-03',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        title: '王小虎',
        content: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      deleate: false,
    }
  },
  methods: {

    handleSelectionChange() {
      this.deleate = true;
    }
  },
  created() {

  }
}
</script>

<style scoped>
@media screen and (min-width: 1970px) {
  .idxs {
    margin: 60px auto;
    width: calc(100% - 290px);
    max-width: 1570px;
    min-width: 1200px;
  }
}

@media screen and (max-width: 1969px) {
  .idxs {
    /*width: 1270px;*/
    /*min-width: 1000px;*/
    /*margin-top: 60px;*/
    /*margin-left: 270px;*/
    /*padding: 40px;*/
    width: calc(100% - 290px);
    max-width: 1570px;
    min-width: 1200px;
    margin: 60px auto;
  }

  .idxs {
    margin-left: 350px;
  }
}


</style>