版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yilanyoumeng3/article/details/84111921
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下,今天把table列表编辑按钮功能实现也分享一下。
主要用把展示的箭头隐藏,把那列宽度设置为0,然后把编辑按钮加上事件,控制expands数组里的id,当触发点击时候把当列的id添加到数组中,同时移除数组中的其他,从而控制里编辑表单内容的显示或隐藏
主要原理还是根据table里面的展示行来扩展实现,代码如下
<template>
<div class="notice-table-box">
<el-table
:data="tablelist"
style="width: 100%;"
class="notice-table-list"
row-key="id" //rowkey
:expand-row-keys="expands" //展开项id
>
<el-table-column
label=""
width="0"
type="expand" //加type属性,展开
cell-class-name="show-form"
>
//要展开的部分
<template slot-scope="scope">
<system-edit
v-if="type==='system'"
:key="scope.row.id"
:row-data="scope.row"
edit-class="edtior-system"
:edit-option="systemOption"
@resetForm="resetForm"
/>
<system-edit
v-if="type==='wechat'"
:row-data="scope.row"
edit-class="edtior-wechat"
:edit-option="wechatOption"
@resetForm="resetForm"
/>
<system-edit
v-if="type==='dingding'"
:row-data="scope.row"
edit-class="edtior-wechat"
:edit-option="wechatOption"
@resetForm="resetForm"
/>
<system-edit
v-if="type==='msg'"
:row-data="scope.row"
edit-class="edtior-system"
:edit-option="systemOption"
@resetForm="resetForm"
>
<p class="msg-send-tip">注意:因变量内容长度不固定,短信内容过长时,<br>
将分条发送(70字/条)</p>
</system-edit>
<system-edit
v-if="type==='email'"
:row-data="scope.row"
edit-class="edtior-wechat"
:edit-option="emailOption"
@resetForm="resetForm"
/>
</template>
</el-table-column>
<el-table-column
prop="type"
label="通知类型"
width="140"
/>
<el-table-column
prop="templateTit"
label="模板标题"
width="140"
/>
<el-table-column
label="模版内容"
width="360"
>
<template slot-scope="scope">
<div class="template-con">
信息编号: <span>{{ scope.row.templateCon.tid }}</span>;
姓名: <span>{{ scope.row.templateCon.name }}</span>;
手机: <span>{{ scope.row.templateCon.tel }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="接收人"
width="220"
>
<template slot-scope="scope">
<div class="receive-p-list">
<span
v-for="(item,index) in scope.row.receivePList"
:key="index"
>{{ item.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column
label="操作"
width="100"
>
<template slot-scope="scope">
<div class="op-tool-box">
<span
v-if="scope.row.auditContent"
class="audit"
>审核中
<el-tooltip
placement="right"
effect="light"
popper-class="audit-hover tip-hover"
trigger="manual"
>
<div
slot="content"
class="audit-tip-box"
>
{{ scope.row.auditContent }}
</div>
<i class="icon iconfont icon-tip-notice-normal-gr tip-icon" />
</el-tooltip>
</span>
<a
v-if="scope.row.edit"
href="javascript:;"
@click="editMsg(scope.row, scope.$index, $event)"
>编辑</a>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import SystemEdit from './SystemEdit'
export default {
components: {
SystemEdit
},
props: {
type: {
type: String,
default: ''
}
},
data () {
return {
tablelist: [
{
id: 1,
type: '新消息通知',
templateTit: '新消息提醒',
templateCon: {
tid: '{{a1233}}',
name: '{{姓名}}',
手机: '{{手机}}'
},
receivePList: [
{
id: '1',
'name': '销售人员'
}
],
auditContent: '短信模版审核中,审核期间短信通知仍将使用之前的模板'
},
{
id: 2,
type: '新消息通知1',
templateTit: '新消息提醒1',
templateCon: {
tid: '{{a1233}}',
name: '{{姓名}}',
tel: '{{手机}}'
},
receivePList: [
{
id: '1',
'name': '销售人员'
},
{
id: '2',
'name': '销售主管'
}
],
edit: 'url'
},
{
id: 3,
type: '新消息通知2',
templateTit: '新消息提醒2',
templateCon: {
tid: '{{a1233}}',
name: '{{姓名}}',
tel: '{{手机}}'
},
receivePList: [
{
id: '2',
'name': '销售主管'
}
],
edit: 'url'
}
],
expands: [],
systemOption: {
placeholder: '',
modules: {
toolbar: [ ]
}
},
wechatOption: {
placeholder: '',
modules: {
toolbar: [
[{ 'color': [] }]
]
}
},
emailOption: {
placeholder: '补充说明客户要求、沟通记录等信息',
modules: {
toolbar: [
[{ 'font': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'color': [] }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'align': [] }]
]
}
}
}
},
mounted () {
// this.expands.push(this.tablelist[1].id)
},
methods: {
editMsg (row, index, e) {
if (this.expands.indexOf(row.id) < 0) {
this.expands = []
this.expands.push(row.id)
} else {
// this.expands.splice(this.expands.indexOf(row.id), 1)
this.expands = []
}
},
resetForm (row) {
this.editMsg(row)
}
}
}
</script>
<style lang="scss">
.notice-setting-box {
padding: 24px;
thead th {
background: #f5f5f5;
font-size: 14px;
color: #333;
}
thead th:first-child,thead th:last-child {
border-radius: 4px;
}
.el-table__expanded-cell[class*=cell] {
padding: 0;
}
.el-table__row td:first-child,thead th:first-child {
width: 0;
padding-left: 0;
padding-top: 0;
}
.el-table__row td:first-child div, thead th:first-child .cell {
display: none;
padding-left: 0 !important;
}
col:first-child {
width: 15px !important;
}
}
</style>
<style lang="scss" scoped>
.receive-p-list {
span {
height: 24px;
line-height: 24px;
background: #eceff1;
padding: 0 10px;
border-radius: 4px;
display: inline-block;
margin-right: 4px;
}
}
.icon-tip-notice-normal-gr {
color: #b3b3b3;
}
.audit-tip-box {
width: 240px;
line-height: 20px;
}
.audit-hover {
width: 240px;
line-height: 20px;
}
.op-tool-box {
position: relative;
}
.msg-send-tip {
margin-left: 82px;
color: #b3b3b3;
line-height: 16px;
margin-top: -15px;
}
</style>
SystemEdit代码如下:
<template>
<div class="system-edit-box">
<el-form
ref="systemForm"
:model="systemForm"
label-width="100"
>
<div class="system-edit-tit">
<h2>{{ rowData.type }}</h2>
<span class="edit-btn">
<el-button @click="resetForm">取消</el-button>
<el-button
type="primary"
class="ml-16"
@click="saveForm"
>保存</el-button>
</span>
</div>
<el-form-item
label="模板标题:"
prop="title"
>
<el-input
v-model="systemForm.title"
type="text"
/>
</el-form-item>
<el-form-item
label="模板内容:"
prop="content"
>
<system-editor
ref="systemEdit"
v-model="systemForm.content"
:class="editClass"
:options="editOption"
@focus="onEditorFocus($event)"
/>
<var-add @getVar="setVar" />
<slot />
</el-form-item>
<el-form-item
label="接收人:"
prop="receiveP"
>
<el-checkbox-group v-model="systemForm.receiveP">
<el-checkbox label="1">销售人员</el-checkbox>
<el-checkbox label="2">销售主管</el-checkbox>
<el-checkbox label="3">公海成员</el-checkbox>
<el-checkbox label="4">管理员</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import VarAdd from './VarAdd'
export default {
components: {
SystemEditor: quillEditor,
VarAdd
},
props: {
rowData: {
type: Object,
default () {
return {}
}
},
editClass: {
type: String,
default: ''
},
editOption: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
systemForm: {
title: this.rowData.templateTit,
content: this.rowData.templateCon.name,
receiveP: [],
index: 0
},
content: ''
}
},
computed: {
title () {
return this.rowData.templateTit
},
conContent () {
return this.rowData.templateCon.name
},
receiveP () {
let arr = []
this.rowData.receivePList.forEach(ele => {
arr.push(ele.id)
})
return arr
},
id () {
return this.rowData.id
}
},
mounted () {
this.rowData.receivePList.forEach(ele => {
this.systemForm.receiveP.push(ele.id)
})
},
methods: {
setVar (item) {
this.$refs.systemEdit.quill.insertText(this.systemForm.index, item.name, '', true)
},
onEditorFocus (e) {
this.systemForm.index = e.getSelection().index
},
resetForm () {
this.$emit('resetForm', this.rowData)
},
saveForm () { }
}
}
</script>
<style lang="scss" >
.system-edit-box {
background: #fff;
padding: 0 24px;
margin-top: -42px;
.el-textarea {
width: 320px;
.el-textarea__inner {
height: 100px;
}
}
.system-edit-tit {
border-bottom: 1px solid #ebebeb;
position: relative;
padding: 10px 0 5px;
margin-bottom: 24px;
.edit-btn {
position: absolute;
right: 0;
top: 3px;
}
}
.edtior-system {
width: 320px;
border-top: 1px solid #ebebeb;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: inline-block;
vertical-align: top;
.ql-toolbar.ql-snow {
display: none;
}
.ql-container {
height: 90px;
}
}
.edtior-wechat {
width: 320px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: inline-block;
vertical-align: top;
.ql-container {
height: 90px;
}
}
}
</style>