示例
html
<div>
<el-select v-model="form.xxx"
placeholder="请选择(搜索不到可新增)"
default-first-option
automatic-dropdown
filterable
clearable
>
<i class="el-icon-search" slot="prefix"></i>
<div slot="empty">
<p style="font-size: 14px;margin-left: 15px">
没有找到想要的内容?
<el-link type="primary"
@click="formVisible = true"
>立即新增</el-link>
</p>
</div>
<el-option v-for="(item, i) in formOptions"
:label="item.title"
:value="item.id"
:key="'formOption-' + i"
>
<el-row type="flex" justify="space-between">
<div>{{item.title}}</div>
<div>
<el-link type="primary"
icon="el-icon-edit-outline"
@click.stop="() => {
form = JSON.parse(JSON.stringify(item))
formVisible = true
}"
></el-link>
<span @click.stop>
<el-popconfirm :title="`确定删除《${item.title}》吗?`"
@confirm="deleteFunction"
>
<el-link type="danger"
icon="el-icon-delete"
slot="reference"
style="margin-left: 5px"
></el-link>
</el-popconfirm>
</span>
</div>
</el-row>
</el-option>
</el-select>
<el-dialog :title="'id' in form?'编辑':'新增'"
:visible.sync="formVisible"
width="30%"
center
>
<el-form :model="form" :rules="formRules" ref="form">
<el-form-item label="名称" prop="title">
<el-input v-model="form.title" clearable></el-input>
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="plain" @click="formVisible = false">取消</el-button>
<el-button type="primary"
@click="submitFunction"
>确定</el-button>
</div>
</el-dialog>
</div>
js
export default {
name: 'FormView',
data() {
return {
form: {},
formVisible: false,
formOptions: [],
formRules: {
title: [
{required: true, message: '该项不能为空', trigger: 'blur'}
]
},
}
},
}