fixed bug

qianlishi 3 years ago
parent ddb997793d
commit 83fce13c92

@ -1,60 +1,61 @@
<template> <template>
<div> <div>
<el-button type="primary" <el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick"
icon="el-icon-plus" >新增</el-button
plain >
@click="handleAddClick">新增</el-button> <el-table :data="formData" style="width: 100%">
<el-table :data="formData" <el-table-column prop="color" label="颜色" align="center">
style="width: 100%">
<el-table-column prop="color"
label="颜色"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="color-box" <span class="color-box" :style="{ background: scope.row.color }" />
:style="{ background: scope.row.color }" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="位置" <el-table-column label="位置" align="center">
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="editor" <span
@click="handleEditorClick(scope.$index, scope.row)"> class="editor"
@click="handleEditorClick(scope.$index, scope.row)"
>
<i class="el-icon-edit" /> 编辑 <i class="el-icon-edit" /> 编辑
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" <el-table-column label="操作" align="center">
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="editor" <span
@click="handleDeleteClick(scope.$index, scope.row)"> class="editor"
@click="handleDeleteClick(scope.$index, scope.row)"
>
<i class="el-icon-delete" /> 删除 <i class="el-icon-delete" /> 删除
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog title="新增" <el-dialog
title="新增"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="30%" width="30%"
:before-close="handleClose"> :before-close="handleClose"
>
<el-form> <el-form>
<el-form-item label="颜色"> <el-form-item label="颜色">
<el-input v-model="colorValue" <el-input
v-model="colorValue"
style="width: 200px" style="width: 200px"
placeholder="请输入颜色"> placeholder="请输入颜色"
>
<template slot="append"> <template slot="append">
<el-color-picker v-model="colorValue" <el-color-picker
:predefine="predefineColors" /> v-model="colorValue"
:predefine="predefineColors"
/>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" <el-button type="primary" @click="handleSaveClick"> </el-button>
@click="handleSaveClick"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
@ -69,7 +70,7 @@ export default {
props: { props: {
formData: Array formData: Array
}, },
data () { data() {
return { return {
predefineColors: [ predefineColors: [
"#ff4500", "#ff4500",
@ -86,21 +87,21 @@ export default {
indexEditor: -1 // indexEditor: -1 //
}; };
}, },
mounted () { }, mounted() {},
methods: { methods: {
// //
handleClose () { handleClose() {
this.dialogVisible = false; this.dialogVisible = false;
this.colorValue = ""; this.colorValue = "";
}, },
// //
handleAddClick () { handleAddClick() {
this.colorValue = ""; this.colorValue = "";
this.flag = true; this.flag = true;
this.dialogVisible = true; this.dialogVisible = true;
}, },
// //
handleSaveClick () { handleSaveClick() {
if (this.flag) { if (this.flag) {
// //
const obj = { const obj = {
@ -114,17 +115,20 @@ export default {
this.dialogVisible = false; this.dialogVisible = false;
} }
this.$emit("input", this.formData); this.$emit("input", this.formData);
this.$emit("change", this.formData);
}, },
// //
handleEditorClick (index, row) { handleEditorClick(index, row) {
this.flag = false; this.flag = false;
this.colorValue = row.color; this.colorValue = row.color;
this.dialogVisible = true; this.dialogVisible = true;
this.indexEditor = index; this.indexEditor = index;
}, },
// //
handleDeleteClick (index) { handleDeleteClick(index) {
this.formData.splice(index, 1); this.formData.splice(index, 1);
this.$emit("input", this.formData);
this.$emit("change", this.formData);
} }
} }
}; };

@ -1,4 +1,3 @@
/* eslint-disable vue/valid-v-for */
<!-- <!--
* @Author: lide1202@hotmail.com * @Author: lide1202@hotmail.com
* @Date: 2021-4-6 11:04:24 * @Date: 2021-4-6 11:04:24
@ -242,6 +241,7 @@
v-if="itemChildList.type == 'customColor'" v-if="itemChildList.type == 'customColor'"
:key="'b-' + idx" :key="'b-' + idx"
v-model="formData[itemChildList.name]" v-model="formData[itemChildList.name]"
@change="changed($event, itemChildList.name)"
/> />
</template> </template>
</el-collapse-item> </el-collapse-item>

@ -101,11 +101,9 @@ export default {
}, },
mounted() {}, mounted() {},
methods: { methods: {
//
handleFocus({ index, left, top, width, height }) { handleFocus({ index, left, top, width, height }) {
// console.log(index, left, top, width, height); // console.log(index, left, top, width, height);
}, },
//
handleBlur({ index, left, top, width, height }) { handleBlur({ index, left, top, width, height }) {
this.$emit("onActivated", { index, left, top, width, height }); this.$emit("onActivated", { index, left, top, width, height });
this.$refs.draggable.setActive(true); this.$refs.draggable.setActive(true);

Loading…
Cancel
Save