element ui-表头自定义提示框

禾苗种树2023-09-23 15:37

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

js 复制代码

	<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>
      </el-table-column>
      </el-table>