common/template/expertList.vue

<template>
  <div id="expertList">
    <el-row>
      <el-col :span="24" style="text-align:center;font-size:24px">评价专家组名单</el-col>
      <el-col :span="24" style="text-align:center">
        <table border="1" style="border-collapse:collapse">
          <tr>
            <td>序号</td>
            <td width="200">评价专家组职务</td>
            <td width="120">姓名</td>
            <td width="200">工作单位</td>
            <td width="200">所学专业</td>
            <td width="200">现从事专业</td>
            <td width="200">职务</td>
            <td width="200">职称</td>
            <td width="200">签名</td>
          </tr>
          <tr v-for="(i, index) in dataList" :key="`tr${index}`">
            <td>{{ index + 1 }}</td>
            <td>{{ getProp(i, 'expert_id.group_zw') }}</td>
            <td>{{ getProp(i, 'expert_id.expert_name') }}</td>
            <td>{{ getProp(i, 'expert_id.company') }}</td>
            <td>{{ getProp(i, 'expert_id.major') }}</td>
            <td>{{ getProp(i, 'expert_id.now_major') }}</td>
            <td>{{ getProp(i, 'expert_id.zw') }}</td>
            <td>{{ getProp(i, 'expert_id.zc') }}</td>
            <td></td>
          </tr>
        </table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="text-align:right;padding-right:50px">(加盖吉林省科技成果评价专用章有效)</el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'expertList',
  props: {
    list: { type: Array, default: () => [] },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {
    getProp(data, prop) {
      return _.get(data, prop);
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    dataList() {
      let dup = _.cloneDeep(_.get(this, 'list', []));
      while (dup.length < 10) {
        dup.push({});
      }
      return dup;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>