|
|
@@ -0,0 +1,160 @@
|
|
|
+<template>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <topInfo :topTitle="topTitle"></topInfo>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <!-- <el-table :data="tableData" style="width: 100%" border>
|
|
|
+ <el-table-column label="序号" type="index" width="50" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="title" label="主题名称" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="serial" label="选项序号" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="content" label="选项内容" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="num" label="选择数量" align="left"> </el-table-column>
|
|
|
+ </el-table> -->
|
|
|
+
|
|
|
+ <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%;">
|
|
|
+ <el-table-column prop="xuhao" label="序号" width="50" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="title" label="主题名称" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="serial" label="选项序号" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="content" label="选项内容" align="left"> </el-table-column>
|
|
|
+ <el-table-column prop="num" label="选择数量" align="left"> </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-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import topInfo from '@/layout/public/top.vue';
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ props: {},
|
|
|
+ components: {
|
|
|
+ topInfo, //头部标题
|
|
|
+ },
|
|
|
+ data: () => ({
|
|
|
+ topTitle: '网上调查结果',
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ xuhao: '1',
|
|
|
+ title: '您是否愿意继续关注本平台？',
|
|
|
+ serial: '1',
|
|
|
+ content: '愿意',
|
|
|
+ num: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serial: '2',
|
|
|
+ content: '不愿意',
|
|
|
+ num: '100',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serial: '3',
|
|
|
+ content: '愿意',
|
|
|
+ num: '1000',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serial: '4',
|
|
|
+ content: '不愿意',
|
|
|
+ num: '10000',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xuhao: '2',
|
|
|
+ title: '四条数据',
|
|
|
+ serial: '1',
|
|
|
+ content: '愿意',
|
|
|
+ num: '10',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serial: '2',
|
|
|
+ content: '不愿意',
|
|
|
+ num: '100',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serial: '3',
|
|
|
+ content: '愿意',
|
|
|
+ num: '1000',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ serial: '4',
|
|
|
+ content: '不愿意',
|
|
|
+ num: '10000',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ currentPage: 1,
|
|
|
+ }),
|
|
|
+ created() {},
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
+ console.log(row, column, rowIndex, columnIndex);
|
|
|
+ if (columnIndex === 0 || columnIndex === 1) {
|
|
|
+ if (rowIndex % 4 === 0) {
|
|
|
+ return {
|
|
|
+ rowspan: 4,
|
|
|
+ colspan: 1,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ rowspan: 0,
|
|
|
+ colspan: 0,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.top {
|
|
|
+ height: 40px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding: 0 15px;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ width: 97%;
|
|
|
+ margin: 0 15px;
|
|
|
+ padding: 20px 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;
|
|
|
+}
|
|
|
+</style>
|
