表格的表头，表体根据后端返回的数据驱动，还有排序

1，今天的需求是改掉之前的表格的写法，之前是用el-table-column一列一列的写，现在直接循环表头来显示各列；
2，el-table里面的样式部分在之前的笔记，表格通用样式里面有；
3，：data='patientInfo’这个数据是表体的数据里面，比如结构为【{Name: “陈XX”
Place: “1146481”}】； v-for="title in Head"这个Head的结构为 【{ColumnCode: “Name”
ColumnName: “姓名”}】； 4，关于:min-width="AutoWidth(title)"是封装了方法，根据传入的值设定最小宽度，代码贴在下面；
5，:sortable=“title.IsSort==1 ? ‘custom’ : false” 这个是列排序，排序的方法写在了@sort-change="sortChange"这里；

<el-table
      :data="patientInfo"
      border
      class="eltable"
      height="96%"
      :header-cell-class-name="headerClassName"
      :header-cell-style="{
        'text-align': 'center',
        background: '#e8eefc',
        color: '#333333',
        'font-size': '14px',
        'font-family': 'PingFang SC',
        'font-weight': '700',
        'border-color': '#CFDBFB',
      }"
      :cell-style="{ 'border-color': '#CFDBFB', padding: '0px' }"
      stripe
      style="width: 98%"
      :row-class-name="tableRowClassName"
      :row-style="{ height: '36px' }"
      @row-dblclick="goPDetails"
      :resizable="true"
      @sort-change="sortChange"
    >
      <template v-for="title in Head" v-loading="loading">
        <el-table-column 
          :key="title.ID" :min-width="AutoWidth(title)"
          :prop="title.ColumnCode" :label="title.ColumnName" align="center"
          show-overflow-tooltip :sortable="title.IsSort==1 ? 'custom' : false">
          <template slot-scope="scope">
	          <span v-if="scope.row.Name.length < 4 && title.ColumnCode == 'Name'"
	              class="patientInfoDiagnosis"
	              >{{ scope.row.Name }}
	          span>
	          <span v-else-if="scope.row.Bed && title.ColumnCode == 'Bed'"
	              style="
	                color: #2b5ff7;
	                font-size: 14px;
	                font-family: PingFang SC;
	                font-weight: 400;
	              "
	              >{{ scope.row.Bed }}
	           span>
	           <div v-else>
	              {{ scope.row[title.ColumnCode] }}
	            div>
        template>
     el-table-column>
   template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// 排序
    sortChange(column, prop, order) {
      let SortWay = '';
      console.log(column, "999999999",prop,order);
      if (column == null || column.column == null) return;
      // if (this.$refs.table) this.$refs.table.clearSort() //清除排序
      if (column.order == "ascending") {
        //升序
        SortWay = 0;
      } else {
        //倒序
        SortWay = 1;
      }
      //这是后端要的排序的字段
      let SortInfo = {
        SortCode:column.prop,
        SortDirection:SortWay
      }
      //去触发排序的接口，我这里是在父组件
      this.$emit("SortInfo", SortInfo);
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

6，以上就是循环表格和排序了，
7，以下是封装的列的最小宽度

//引入
import OtherSheetTableWidth from "@/api/OtherSheetTableWidth";

AutoWidth(title) {
 console.log(545,title)
  return OtherSheetTableWidth(title);
},

1
2
3
4
5
6
7
8

在OtherSheetTableWidth.js 里

const AutoWidth = function (title) {
  // console.log(title)
  switch (title.ColumnCode) {
    case "Name":
      return '50'
      break;
       default:
      break;
  }
}
export default AutoWidth
1
2
3
4
5
6
7
8
9
10
11

END 哈哈哈哈