element ui table组件扩展关于列表编辑按钮的位置放置

版权声明：本文为博主原创文章，未经博主允许不得转载。 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>