首页 |  我的博客 |  查看该博主内容分类 | 

*elementUI的el-select增加增删改查功能的示例(含el-dialog用法)

示例

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'}
                ]
            },
        }
    },
}
posted @ 2024-09-12 18:54  Z哎呀  阅读(95)  评论(0)    收藏  举报