| | |
|---|
| | | <template> |
|---|
| | | <el-dialog v-model="dialogVisible" title="选择安全目标指标" width="50%" draggable> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="20"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <el-form ref="ruleFormRef" :model="ruleForm" status-icon> |
|---|
| | | <el-row> |
|---|
| | | <el-col :span="6"> |
|---|
| | |
|---|
| | | @current-change="handleCurrentChange" |
|---|
| | | /> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="4"></el-col> |
|---|
| | | <el-col :span="7"> |
|---|
| | | <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" style="margin:5px" closable :disable-transitions="false" @close="handleClose(tag)"> |
|---|
| | | {{ tag }} |
|---|
| | | </el-tag> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <template #footer> |
|---|
| | | <span class="dialog-footer"> |
|---|
| | |
|---|
| | | const handleCurrentChange = (val: number) => { |
|---|
| | | console.log(`current page: ${val}`); |
|---|
| | | }; |
|---|
| | | // 右方点击添加后显示标签 |
|---|
| | | const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3']); |
|---|
| | | const handleClose = (tag: string) => { |
|---|
| | | dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1); |
|---|
| | | }; |
|---|
| | | return { |
|---|
| | | dialogVisible, |
|---|
| | | openDailog, |
|---|
| | |
|---|
| | | pageSize4, |
|---|
| | | handleSizeChange, |
|---|
| | | handleCurrentChange, |
|---|
| | | dynamicTags, |
|---|
| | | handleClose, |
|---|
| | | Delete, |
|---|
| | | }; |
|---|
| | | }, |
|---|
