导出平台问题以及解决方案（随笔）

问题一：针对不同页面的表格的不同设置，如何显示不同的字段以及表格数据？
在这次的导出平台中，由于所有页面是用一个通用组件来显示的，所以针对页面的表格也是。没有办法写出每一个页面的表头，就必须得通过遍历来获取表头，我们采取的办法是，在一个配置js文件中，设置一个词典dic：

在通用组件home.vue文件中，引用配置文件中的dic词典，通过遍历得到每一个不同的页面的不同表头：

后端返回数据中数组sortIndex是已经经过排序的字段，按照这个字段来设置表头，得到每一个数组元素，令其为index，然后通过对比之前设置的字典dic，如果存在这样的字典字段，则将该数据加入表头中，让它的表头字段名即title为字典中已设置的标题，在该表头这一列下面对应的内容的字段名即为key，也就是我们通过遍历得到的index，index就是后端返回的list中每一个字段，也就是我们要得到的数值。因为在后端接口中，sortIndex中的内容就是跟list中的内容一一对应，这样的话，我们就得到了排序好的表格以及表格中的数据。得到数据后遍历list的值，即可得到表格里的数据。
 
问题二：某些表格中需要有特殊操作，不只是显示后端返回数据，要怎么做？
关于columns中的slot是一个插槽，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
在组件模板中占好了位置，当使用该组件标签的时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑<slot name= ” mySlot ” >有命名时，组件标签中使用属性slot= ” mySlot ” 的元素就会替换该对应位置内容；

在表格中，我们也会经常用到slot，例如我要在表格里有一栏是“已获得勋章数”时，通过判断勋章数，只要数量大于0，就需要显示一个“明细”按钮，点击按钮可以展示该用户获得的每一个勋章名称。由于每个页面都不一样，表格也不一样，且表格都是遍历得到的，所以在这个公共的表格获取时，就需要用到slot，并通过判断某个字段是否需要添加slot的字段来增加slot，所以此时通过判断dic[index]是“已获得勋章数”时，columns中增加slot，并让其slot名为“detail”

在页面的table中就会增加一列插槽，这时便可以针对“已获得勋章数”这一列来显示明细 按钮。

**问题三：**对于表格的每一行，如果某个数据返回是null时则需要显示“–”，怎么做？
回答：使用Render函数：
如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。
说明：render是一个方法，自带一个形参createElement，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上
h 函数的本质是createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上，如同官方文档所示：
1 render: function (createElement) {
2 return createElement(
3 ‘h’ + this.level, // tag name 标签名称
4 this.$slots.default // 子组件中的阵列
5 )
6 }

大概的翻译下：
render: h => h(App) 是下面内容的缩写：

1. render: function (createElement) {

2.  return createElement(App);
   

3. }
   进一步缩写为(ES6 语法)：
4. render (createElement) {

5.  return createElement(App);
   

6. }
   再进一步缩写为：
7. render (h){

8.  return h(App);
   

9. }
   按照 ES6 箭头函数的写法，就得到了：
   render: h => h(App);

render本身就是一个函数，我们无非就是修改里面的内容，页面加载时函数调用，我们就在这个时候做判断就可以实现根据后台返回的状态码，根据不同的条件将数据显现在页面上，因此，用在表格中，可以实现对某一列数据的渲染。

当数据值存在时，即显示为该数据；当数据不存在时，则显示“–”。利用该render函数就可以很好的实现这一点，并用于到所有的表格中的每一个数据上。

**问题四：**想要实现当点击4.0平台时没有“选择对比环节”这部分内容，在选择3.0平台时才有这个内容，怎么做到？
父组件是Home.vue,子组件有selcet.vue、button.vue、buttonGroup.vue等组件。

我们首先考虑在加载组件的时候利用v-if进行判断，如果platform选择是3.0就展示这个button group，如何 4.0则不展示。但是发现在此处进行判断是不行的，得不到我们想要的结果。
于是换一种方法，我们选择在子组件buttonGroup.vue中创建一个方法用来判断当这个单选按钮的名字是”languageType”时，所选择的平台platform是3.0才可以显示这个单选按钮的部分内容：

然后在父组件Home.vue中调用该子组件的方法，在加载各个组件的时候，传入platForm的值先进行判断，判断名为“languageType”的单选按钮是否可以显示。

问题五：
在select中，出现单选时点击选择数据后，再次点击该选择会出现数据显示消失的情况，我们此时点击旁边任意地方是会发现select中实际上是有数据的，于是想到以下解决办法：

问题六：
在表格里数据只展示一部分 剩下部分省略号代替：
style="
overflow:hidden; // 该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。
display:-webkit-box;
-webkit-box-orient:vertical; // 子元素排列 vertical（竖排）
-webkit-line-clamp:3; // 行数为3
"