vue2在element UI的table中给指定列添加圆点标志,鼠标悬浮出提示信息
在Vue 2中,你可以使用Element UI的el-table-column
组件来添加指定列的圆点标志和鼠标悬浮提示信息。你可以使用render-header
属性来自定义列头的内容,并通过el-tooltip
组件来实现鼠标悬浮提示。
以下是一个简单的示例代码:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="status"
width="100"
label="状态">
<template slot-scope="scope">
<el-tooltip :content="statusTooltip(scope.row)" placement="top">
<i v-if="scope.row.status === 'success'" class="el-icon-circle-check" style="color: #67C23A;"></i>
<i v-else-if="scope.row.status === 'warning'" class="el-icon-warning" style="color: #E6A23C;"></i>
<i v-else-if="scope.row.status === 'danger'" class="el-icon-circle-close" style="color: #F56C6C;"></i>
<i v-else class="el-icon-loading" style="color: #909399;"></i>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '张三', status: 'success' },
{ date: '2016-05-04', name: '李四', status: 'warning' },
{ date: '2016-05-01', name: '王五', status: 'danger' },
{ date: '2016-05-03', name: '赵六', status: 'loading' }
]
};
},
methods: {
statusTooltip(row) {
const statusMap = {
'success': '操作成功',
'warning': '有警告',
'danger': '操作失败',
'loading': '进行中'
};
return statusMap[row.status];
}
}
};
</script>
在这个例子中,我们定义了一个包含状态列的表格,该列根据不同的状态值显示不同的圆点标志。鼠标悬浮时,会显示相应的提示信息。你可以根据自己的需求调整状态值和对应的图标。
评论已关闭