admin-cms-1/src/layout/personnel/guidanceData.vue

<template>
  <div id="guidanceData">
    <el-row>
      <el-col :span="24" class="guidanceData">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="name" label="指导信息名称" width="" align="left"> </el-table-column>
          <el-table-column prop="type" label="指导信息类型" width="" align="left"> </el-table-column>
          <el-table-column prop="user" label="发布人" width="" align="left"> </el-table-column>
          <el-table-column prop="date" label="申请日期" width="" align="left"> </el-table-column>
          <el-table-column label="操作" width="" align="left">
            <template slot-scope="scoped">
              <el-button size="mini" type="primary" icon="el-icon-view" @click="openDialog(scoped.$index)"></el-button>
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="addData(scoped.$index)"></el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click.native.prevent="deleteRow(scoped.$index, tableData)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="1"
          >
          </el-pagination>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="详细信息" :visible.sync="dialog">
      <p class="text">就业指导名称：{{ info.name }}</p>
      <p class="text">就业指导类型：{{ info.type }}</p>
      <p class="text">就业指导发布人：{{ info.user }}</p>
      <p class="text">申请日期：{{ info.date }}</p>
      <p class="text">
        内容：<span>{{ info.content }}</span>
      </p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'guidanceData',
  props: {
    tableData: null,
  },
  components: {},
  data: () => ({
    currentPage: 1,
    dialog: false,
    info: {},
    pic: require('@/assets/logo.png'),
  }),
  created() {},
  computed: {},
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    addData(index) {
      if (index !== undefined) {
        let data = this.tableData[index];
      } else {
        this.form = {};
      }
      this.$router.push({ path: './detail' });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    openDialog(index) {
      if (index !== undefined) {
        let data = JSON.parse(JSON.stringify(this.tableData[index]));
        data[`index`] = index;
        this.$set(this, `info`, data);
      }
      this.dialog = true;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
/deep/.el-table th {
  padding: 5px 0;
  background: #f2f2f2;
}
/deep/.el-table td {
  padding: 5px 0;
}
/deep/.el-table tr {
  background: #f9f9f9;
}
/deep/.el-table tr:nth-child(2n) {
  background: #fff;
}
.page {
  text-align: center;
  padding: 30px 0;
}
.text {
  font-size: 16px;
  padding: 0 0 10px 0;
}
.text span {
  display: inherit;
  text-indent: 1rem;
}
</style>