53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-table :data="list" border stripe>
|
||
|
|
<el-table-column type="index" width="50" />
|
||
|
|
<el-table-column label="来源名称">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-input v-model="row.name" placeholder="请输入" :clearable="false" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="获取连接">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-input v-model="row.link" placeholder="请输入" :clearable="false" />
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="100px">
|
||
|
|
<template #default="{ $index }">
|
||
|
|
<el-button type="primary" style="padding: 0px" text @click="handleRemove($index)"
|
||
|
|
>删除</el-button
|
||
|
|
>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<div class="mt-20px flex justify-center">
|
||
|
|
<el-button type="primary" @click="handleInsert">新增规则</el-button>
|
||
|
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||
|
|
<el-button>重置</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const list = ref([
|
||
|
|
{ name: '一点通账号1', link: 'http://baidu.com' },
|
||
|
|
{ name: '一点通账号2', link: 'http://baidu.com' },
|
||
|
|
{ name: '宝典账号', link: 'http://baidu.com' },
|
||
|
|
{ name: '抖音', link: 'http://baidu.com' }
|
||
|
|
])
|
||
|
|
|
||
|
|
function handleInsert() {
|
||
|
|
list.value.push({ name: '', link: '' })
|
||
|
|
}
|
||
|
|
|
||
|
|
function onSubmit() {
|
||
|
|
console.log('保存成功')
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleRemove(idx) {
|
||
|
|
list.value.splice(idx, 1)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|