element ui-表头自定义提示框

• 版本
  “element-ui”: “^2.15.5”,
• 需求：鼠标悬浮到该列表头，显示提示框
• 代码

	<el-table
        :data="xxxx"
       >
      <el-table-column  label="序号" width="40" type="index"  />
      <el-table-column
        v-for="(item) in xx2"
        :key="item.prop"
        :prop="item.prop"
        :label="item.lable"
        >
       // 表身插槽
        <template slot-scope="scope">
          <div
            v-if="scope.column.label !== 'xxx'">
            {{scope.row[scope.column.property] ? scope.row[scope.column.property] : '无'}}
          </div>
          <div v-else>
            <el-switch
              v-if="scope.column.label === '是否入伍'"
              v-model="scope.row[scope.column.property]"
              @change="changeSwitch(scope.column,scope.row,scope.$index)"
              active-text="是"
              inactive-text="否"
              active-value=1
              inactive-value=0
              >
            </el-switch>
          </div>
        </template>
		//  表头插槽+弹出提示框
        <template slot="header" slot-scope="scope">
          <span v-if="item.prop!='xxA'">{{ scope.column.label }}</span>
          // prop等于xxA 的有提示框
          <el-tooltip v-else  effect="dark" content="你想提示的弹框信息字段" placement="top">
              <span>{{ scope.column.label }}</span>
          </el-tooltip>
      </template>

		// 表身某一鼠标移入弹出提示框 重要的属性popper-class加类名 这个类的定义要另写一个单独的style里
		 <template slot-scope="scope">
			 <el-tooltip  effect="light" placement="right-start" popper-class="wh-slot">
	              <span>{{ scope.row.Name }}</span>
	              <div slot="content">
	                <p class="wh-slot-title">信息</p>
	                <p class="wh-slot-li"><span>所在班级：</span><span>{{ scope.row.xx}}</span></p>
	                <p class="wh-slot-li"><span>班主任：</span><span>{{ scope.row.nameB }}</span></p>
	              </div>
	          </el-tooltip>
  		</template>

      </el-table-column>
      </el-table>

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
50
51
52
53

// css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16