devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于element UI 显示编辑表格_elementui 可编辑表格

作者：从前慢现在也慢 | 2024-03-06 19:40:03

赞

踩

elementui 可编辑表格

基于element ui 实现编辑表格，支持文本、下拉、日期、链接等形式，实现了回车到下一个输入框，每一个回车都可以触发业务回车事件，例如计算小计；最后一格回车可以触发自动增行等效果。

实现效果如下

组件入口 index.vue

  1. <template>
  2.   <my-form :model="tableDataTmp" ref="tableForm" class="edit-table-dialog" @submit.native.prevent :class="{'edit-table-disabled': disabled}">
  3.     <el-row justify="end" type="flex">
  4.       <div class="title-tag" v-if="title">{{ title }}</div>
  5.       <slot name='btn-more-before'></slot>
  6.       <el-button type="primary" plain size="small" icon="el-icon-plus"     @click="addRow" v-if="!disabled && (options.showAddBtn==undefined || options.showAddBtn==null || options.showAddBtn)">新增行</el-button>
  7.       <el-button type="primary" plain size="small" icon="el-icon-delete"     @click="deleteRow" v-if="!disabled && (options.showDelBtn==undefined || options.showDelBtn==null || options.showDelBtn)">删除行</el-button>
  8.       <slot name="btn-more"></slot>
  9.     </el-row>
  10.     <el-table ref="editTableRef" border :data="tableDataTmp.tableData" row-key="__rowKey" @selection-change="selectionChange" @select="handleSelect" class="edit-table" :row-class-name="tableRowClassName" :height="height" empty-text=" ">
  11.       <template v-for="item in columnData">
  12.         <column ref="columnRef" :key="item.label" :columnInfo="item" :options="options" :tableRules="tableRules" :rowKey="rowKey" :defaultShowEdit="defaultShowEdit"
  13.           :selectList="selectList" :isDiff="isDiff" :disabled="disabled" :editIndex="editIndex" @editFocus="editFocus" @keyupEnter="keyupEnter" @onfocus="onfocus" @link="clickLink"></column>
  14.       </template>
  15.     </el-table>
  16.     <table-dialog ref="tableDialogRef" :open.sync="open" :tabName="tabName" :tabParams="tabParams" :hideColumns="hideColumns" @oncheck="oncheck"></table-dialog>
  17.   </my-form>
  18. </template>
  19.  
  20. <script>
  21. import MyForm from './form/form.vue'
  22. import Column from './column.vue'
  23. import TableDialog from '@/components/TableDialog/index.vue'
  24. export default {
  25.   name: "EditTable",
  26.   components: { TableDialog, MyForm, Column },
  27.   props: {
  28.     height: {
  29.       type: [String, Number]
  30.     },
  31.     columnData: {
  32.       type: Array,
  33.       default: () => {
  34.         return []
  35.       }
  36.     },
  37.     emptyRow: {
  38.       type: Object,
  39.       default: () => {
  40.         return {}
  41.       }
  42.     },
  43.     tableData: {
  44.       type: Array,
  45.       default: () => {
  46.         return []
  47.       }
  48.     },
  49.     tableRules: {
  50.       type: Object,
  51.       default: () => {
  52.         return {}
  53.       }
  54.     },
  55.     options: {
  56.       type: Object,
  57.       default: () => {
  58.         return {
  59.           showAddBtn: true,
  60.           showDelBtn: true
  61.         }
  62.       }
  63.     },
  64.     rowKey: {
  65.       type: [String, Function]
  66.     },
  67.     defaultShowEdit: {
  68.       type: Boolean,
  69.       default: false
  70.     },
  71.     // 是否显示比对
  72.     isDiff: {
  73.       type: Boolean,
  74.       default: false
  75.     },
  76.     disabled: {
  77.       type: Boolean,
  78.       default: false
  79.     },
  80.     title: {
  81.       type: String,
  82.       default: ''
  83.     },
  84.   },
  85.   data() {
  86.     return {
  87.       tableDataTmp: {
  88.         tableData: []
  89.       },
  90.       // 末级列数据
  91.       columnDataLast: [],
  92.       tabName: null,
  93.       tabParams: {},
  94.       hideColumns: null,
  95.       editIndex: '', // 当前编辑单元格
  96.       open: false,
  97.       chooseData: {},
  98.       selections: [],
  99.       rowids: [],
  100.       selectList: [],
  101.       isEnter: false // 是否回车
  102.     }
  103.   },
  104.   created() {},
  105.   watch: {
  106.     'tableData': {
  107.       handler() {
  108.         let rowKeyTmp = new Date().getTime()
  109.         this.tableData.forEach((tb, index) => {
  110.           tb.rowEdit = (tb.rowEdit === undefined || tb.rowEdit === null) ? true : tb.rowEdit
  111.           if (!tb.__rowKey) {
  112.             tb.__rowKey = tb[this.rowKey] || (rowKeyTmp+'_'+index)
  113.           }
  114.         });
  115.         this.tableDataTmp = { tableData: this.tableData }
  116.       },
  117.       immediate: true
  118.     },
  119.     'columnData': {
  120.       handler() {
  121.         let columnDataLast = []
  122.         let func = (list, level) => {
  123.           list.forEach((item, index)=>{
  124.             if (item.children && item.children.length>0) {
  125.               func(item.children, level+'_'+index)
  126.             } else {
  127.               columnDataLast.push({ ...item, level__: level+'_'+index })
  128.               // 如果没有设置renderHeader，且是必填字段，添加必填星号
  129.               if (this.tableRules[item.prop] && !item.renderHeader) {
  130.                 let valIndex = this.tableRules[item.prop].findIndex((validate)=>{
  131.                   return validate.required
  132.                 })
  133.                 if (valIndex > -1) {
  134.                   item.renderHeader = (h, data)=>{
  135.                     return [
  136.                       h('span', { style: 'color: #F56C6C;margin-right: 5px;' }, '*'),
  137.                       h('span', item.label)
  138.                     ]
  139.                   }
  140.                 }
  141.               }
  142.               // 如果是dataSelect类型，预处理数据
  143.               if (item.editType === 'dataSelect') {
  144.                 // let _options = { ...item.selectData, headers: { hideMessage: true } }
  145.                 // request(_options).then((rsp)=>{
  146.                 //   this.$set(this.cacheSelectData, item.prop, rsp.data)
  147.                 // })
  148.               }
  149.             }
  150.           })
  151.         }
  152.         func(this.columnData, 'a')
  153.         this.columnDataLast = columnDataLast
  154.       },
  155.       deep: true,
  156.       immediate: true
  157.     }
  158.   },
  159.   methods: {
  160.     // 表格行样式
  161.     tableRowClassName({row, rowIndex}) {
  162.       if (!this.isDiff) return ''
  163.       if (row.DELROW) {
  164.         return 'warning-row';
  165.       } else if (row.ADDROW) {
  166.         return 'success-row';
  167.       }
  168.       return '';
  169.     },
  170.     addRow() {
  171.       let index = this.tableDataTmp.tableData.length
  172.       let row = { __rowKey: new Date().getTime() }
  173.       if(this.emptyRow) row = { ...row, ...this.emptyRow }
  174.       this.tableDataTmp.tableData.splice(index, 0, row)
  175.       // this.$emit('update:tableData', this.tableDataTmp.tableData)
  176.     },
  177.     deleteRow() {
  178.       if (!this.rowids || this.rowids.length==0) {
  179.         this.$modal.msgError("请选择要删除的行");
  180.         return
  181.       }
  182.  
  183.       this.rowids.forEach((id)=>{
  184.         let index = this.tableDataTmp.tableData.findIndex(item=>(item.__rowKey==id))
  185.         this.tableDataTmp.tableData.splice(index, 1)
  186.       })
  187.       // this.$emit('update:tableData', this.tableDataTmp.tableData)
  188.     },
  189.     selectionChange (selections) {
  190.       this.selections = selections
  191.       this.rowids = this.selections.map(item=>item.__rowKey)
  192.       this.$emit('selection-change', selections)
  193.     },
  194.     handleSelect(selection, row) {
  195.       this.$emit('select', selection, row)
  196.     },
  197.     getSelection () {
  198.       return this.selections
  199.     },
  200.     selectSame (sameList, checked) {
  201.       this.$nextTick(()=>{
  202.         sameList.forEach(item=>{
  203.           this.$refs.editTableRef.toggleRowSelection(item, checked)
  204.         })
  205.       })
  206.     },
  207.     onfocus(index_) {
  208.       setTimeout(async () => {
  209.         if (this.disabled) return false
  210.         this.editIndex = index_
  211.         const { rowIndex, colIndex, row, columnConfig, columnValue } = this.getCommonData()
  212.         if (columnConfig.editType === 'select') {
  213.           row[columnConfig.valprop || columnConfig.prop] = null
  214.           this.selectList = await columnConfig.selectData.getData(row)
  215.           row[columnConfig.valprop || columnConfig.prop] = columnValue
  216.         }
  217.         this.$nextTick(() => {
  218.           const editEl = this.getElementRef(rowIndex, colIndex)
  219.           if (columnConfig.editType === 'select') {
  220.             editEl.toggleMenu()
  221.           } else {
  222.             editEl && editEl.focus()
  223.           }
  224.         })
  225.       }, 200) // 日期回车下一个是下拉时，触发了下拉的回车事件，触发了两次回车
  226.     },
  227.     getElementRef (rowIndex, colIndex) {
  228.       let columnConfig = this.columnDataLast[colIndex]
  229.       let levels = columnConfig.level__.split('_')
  230.       let editEl = this
  231.       for(let n = 1;n<levels.length;n++) {
  232.         editEl = editEl.$refs['columnRef'][parseInt(levels[n])]
  233.       }
  234.       editEl = editEl.$refs['flaga-' + rowIndex + '-' + columnConfig.prop].$children[1]
  235.       // if (columnConfig.editType === 'dataSelect') {
  236.       //   editEl = editEl.$children[0]
  237.       // }
  238.       return editEl
  239.     },
  240.     getCommonData () {
  241.       let indexs = this.editIndex.split('-')
  242.       let rowIndex = parseInt(indexs[0])
  243.       let colProp = indexs[1]
  244.       let colIndex = this.columnDataLast.findIndex((item)=>item.prop===colProp)
  245.       let columnConfig = this.columnDataLast[colIndex]
  246.       let row = this.tableDataTmp.tableData[rowIndex]
  247.       let columnValue = columnConfig.editType === 'select' ? row[columnConfig.valprop || columnConfig.prop] : row[columnConfig.prop]
  248.       return {rowIndex, colProp, colIndex, columnConfig, row, columnValue}
  249.     },
  250.     // 进入下一个可编辑单元格
  251.     nextStep() {
  252.       if (!this.editIndex) {
  253.         return false
  254.       }
  255.       let { rowIndex, colIndex, columnConfig } = this.getCommonData()
  256.       let nextColIndex = -1
  257.       // 查找当前行下一个可编辑项
  258.       if (colIndex < this.columnDataLast.length - 1) {
  259.         for (let ind = colIndex + 1; ind < this.columnDataLast.length; ind++) {
  260.           if (this.columnDataLast[ind].edit && this.columnDataLast[ind].editType !== 'link') {
  261.             nextColIndex = ind
  262.             columnConfig = this.columnDataLast[ind]
  263.             break
  264.           }
  265.         }
  266.       }
  267.       let editEl = this.getElementRef(rowIndex, colIndex)
  268.       // 找到下一个编辑列
  269.       if (nextColIndex !== -1) {
  270.         editEl.blur()
  271.         this.onfocus(rowIndex + '-' + columnConfig.prop)
  272.       }
  273.       // 未找到判断是否有下一行，有下一行进入下一行第一个
  274.       else if (rowIndex < this.tableDataTmp.tableData.length - 1) {
  275.         let nextRowIndex = this.tableDataTmp.tableData.findIndex((row, index)=>{
  276.           return index > rowIndex && row.rowEdit
  277.         })
  278.  
  279.         if (nextRowIndex > -1) {
  280.           for (let ind = 0; ind < this.columnDataLast.length; ind++) {
  281.             if (this.columnDataLast[ind].edit && this.columnDataLast[ind].editType !== 'link') {
  282.               nextColIndex = ind
  283.               columnConfig = this.columnDataLast[ind]
  284.               break
  285.             }
  286.           }
  287.           // const editEl = this.getElementRef(rowIndex, colIndex)
  288.           editEl.blur()
  289.           this.onfocus(nextRowIndex + '-' + columnConfig.prop)
  290.         }
  291.       }
  292.     },
  293.     // 聚焦
  294.     editFocus(index_) {
  295.       this.editIndex = index_
  296.       // let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
  297.       // let editEl = this.getElementRef(rowIndex, colIndex)
  298.       // if (columnConfig.editType === 'select') {
  299.       //   editEl.toggleMenu()
  300.       // } else {
  301.       //   editEl.focus()
  302.       // }
  303.     },
  304.     next () {
  305.       let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
  306.       if (columnConfig.editType === 'date') {
  307.         this.nextStep()
  308.         return
  309.       } else if (columnConfig.editType === 'dialog') {
  310.         this.nextStep()
  311.       } else {
  312.         this.nextStep()
  313.       }
  314.     },
  315.     // 回车事件
  316.     keyupEnter(isNext=true, e) {
  317.       // console.log('====', isNext, this.isEnter, e)
  318.       if (isNext) {
  319.         this.isEnter = true
  320.       } else if (!isNext) {
  321.         let curField = this.getCommonData()
  322.         // 展示下拉项时，不要执行操作 | dialog失焦时不执行操作
  323.         if (curField.columnConfig.editType === 'select' && e == true) {
  324.           return false
  325.         } else if (curField.columnConfig.editType === 'dialog') {
  326.           return false
  327.         }
  328.         // 如果当前已标记为回车，不执行接下来的操作
  329.         if (this.isEnter) {
  330.           this.isEnter = false
  331.           return
  332.         }
  333.         // 下面这段逻辑暂时好像不需要
  334.         //  else {
  335.         //   let curField = this.getCommonData()
  336.         //   if (curField.columnConfig.editType === 'select' && ) {
  337.         //     // e===false && (this.editIndex=null)
  338.         //   } else {
  339.         //     this.editIndex = null
  340.         //   }
  341.         // }
  342.       }
  343.       // console.log('====keyupEnter', this.editIndex)
  344.       let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
  345.       // 如果是弹框，直接弹框
  346.       if (columnConfig.editType === 'dialog') {
  347.         // 单元格内容
  348.         this.tabName = columnConfig.dialogData.tabName
  349.         let tabParams = { [columnConfig.prop]: columnValue }
  350.         // 解析传入参数
  351.         let tabParamsIn = {}
  352.         if (columnConfig.dialogData.tabParams && typeof columnConfig.dialogData.tabParams == 'function') {
  353.           tabParamsIn = columnConfig.dialogData.tabParams(row)
  354.         } else if (columnConfig.dialogData.tabParams) {
  355.           tabParamsIn = columnConfig.dialogData.tabParams
  356.         }
  357.         tabParams = {...tabParamsIn, ...tabParams}
  358.         this.tabParams = tabParams
  359.         this.hideColumns = columnConfig.dialogData.hideColumns
  360.         this.open = true
  361.         this.$nextTick(()=>{
  362.           this.$refs.tableDialogRef.focusDialog()
  363.         })
  364.         return
  365.       } else if (columnConfig.editType === 'select') {
  366.         let current = this.selectList.find(item=>item[columnConfig.selectData.value] == columnValue)
  367.         if (!current) current = {}
  368.         this.chooseData = current
  369.         let updateFields = (columnConfig.selectData ? columnConfig.selectData.updateFields : null)
  370.         if (!updateFields && columnConfig.selectData) {
  371.           let defaultUpdateFields = {}
  372.           if (columnConfig.valprop) {
  373.             defaultUpdateFields = { [columnConfig.valprop]: columnConfig.selectData.value, [columnConfig.prop]: columnConfig.selectData.label }
  374.           } else {
  375.             defaultUpdateFields = { [columnConfig.prop]: columnConfig.selectData.value }
  376.           }
  377.           updateFields = defaultUpdateFields
  378.         }
  379.         this.updateChooseData(rowIndex, updateFields, true)
  380.       }
  381.       this.validateNext(isNext)
  382.     },
  383.     // 验证与下一步
  384.     validateNext (isNext = true) {
  385.       let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
  386.       if (columnConfig.editType !== 'dialog') {
  387.         // this.$emit('update:tableData', this.tableDataTmp.tableData)
  388.       }
  389.       // 弹框传递额外参数
  390.       let otherParams = (columnConfig.editType === 'dialog') ? this.updateChooseData(rowIndex, (columnConfig.dialogData ? columnConfig.dialogData.updateFields : null)) : null
  391.       // let otherParams = JSON.parse(JSON.stringify(this.tableDataTmp.tableData[rowIndex]))
  392.       // 验证单元格数据，验证不通过不继续执行
  393.       this.$refs.tableForm.validateField('tableData.'+rowIndex+'.'+columnConfig.prop, (result) => {
  394.         if (result) {
  395.           if (columnConfig.editType === 'dialog') this.$modal.msgError(result)
  396.           return
  397.         }
  398.         if (columnConfig.editType === 'dialog') {
  399.           this.updateChooseData(rowIndex, (columnConfig.dialogData ? columnConfig.dialogData.updateFields : null), true)
  400.           // this.$emit('update:tableData', this.tableDataTmp.tableData)
  401.           this.open = false
  402.         }
  403.  
  404.         // 判断是否跳转到下一步
  405.         let next = isNext ? this.next : ()=>{}
  406.         // 判断是否有业务回调 判断是否跳转到下一步
  407.         if (columnConfig.callback) {
  408.           columnConfig.callback({index: rowIndex, row: row, isEnter: isNext}, next )
  409.           return
  410.         }
  411.         next()
  412.       }, otherParams)
  413.     },
  414.     // 弹框选择带回
  415.     oncheck (chooseData) {
  416.       if (!chooseData) return;
  417.       this.chooseData = chooseData
  418.       // let {rowIndex, columnConfig} = this.getCommonData()
  419.       // this.updateChooseData(rowIndex, (columnConfig.dialogData ? columnConfig.dialogData.updateFields : null), true)
  420.       // this.open = false
  421.       this.validateNext()
  422.     },
  423.     /**
  424.      * 更新弹框数据。isTemp传true-更新数据，传false-返回临时数据
  425.      */
  426.     updateChooseData (rowIndex, updateFields, isTemp = false) {
  427.       let tmpData = JSON.parse(JSON.stringify(this.tableDataTmp.tableData[rowIndex]))
  428.       if (updateFields) {
  429.         if (updateFields instanceof Array) {
  430.           updateFields.forEach((key) => {
  431.             tmpData[key] = this.chooseData[key]
  432.             isTemp && this.$set(this.tableDataTmp.tableData[rowIndex], key, this.chooseData[key])
  433.           })
  434.         } else {
  435.           var objkeys = Object.keys(updateFields)
  436.           objkeys.forEach((key) => {
  437.             tmpData[key] = this.chooseData[updateFields[key]]
  438.             isTemp && this.$set(this.tableDataTmp.tableData[rowIndex], key, this.chooseData[updateFields[key]])
  439.           })
  440.         }
  441.       }
  442.       return tmpData
  443.     },
  444.     validate (callback) {
  445.       return new Promise((resolve, reject) => {
  446.         this.$refs.tableForm.validate(callback).then((result)=>{
  447.           resolve(result)
  448.         }).catch(e=>{
  449.           let errorArr = Object.values(e)
  450.           this.$modal.msgError(errorArr[0][0].message);
  451.           reject(e)
  452.         })
  453.       })
  454.     },
  455.     validateRow (index, callback) {
  456.       return this.$refs.tableForm.validateRow(index, callback)
  457.     },
  458.     resetTableform() {
  459.       this.resetForm('tableForm')
  460.     },
  461.     clickLink(prop, scope) {
  462.       this.$emit('link', prop, scope)
  463.     }
  464.   },
  465. };
  466. </script>
  467. <style lang="scss" scoped>
  468.   // .edit-table-dialog ::v-deep .table-form-item.is-error:hover .el-form-item__error{
  469.   //   display: block!important;
  470.   // }
  471.   .edit-table-dialog{
  472.     // 标题按钮行
  473.     .title-tag {
  474.       margin: 4px 0;
  475.       flex-grow: 1;
  476.     }
  477.     .edit-table {
  478.       margin-top: 10px;
  479.       ::v-deep .el-table__body-wrapper {
  480.         tr:hover > td.el-table__cell{
  481.           background-color: #fff;
  482.         }
  483.         // overflow: unset; // 超出的字段滚动
  484.         .el-table__cell {
  485.           padding: 0!important;
  486.           &.el-table-column--selection .el-checkbox {
  487.             margin-left: 16px;
  488.           }
  489.           .cell {
  490.             // overflow: unset;
  491.             padding: 0!important;
  492.             .column-text {
  493.               width: 100%;
  494.               height: 48px;
  495.               line-height: 48px;
  496.               overflow: hidden;
  497.               text-overflow: ellipsis;
  498.               white-space: nowrap;
  499.               display: flex;
  500.               justify-content: center;
  501.               align-items: center;
  502.               .edit-border {
  503.                 cursor: pointer;
  504.               }
  505.               .date {
  506.                 position: relative;
  507.                 width: calc(100% - 12px);
  508.                 height: 36px;
  509.                 line-height: 36px;
  510.                 border: 1px solid #F0F2F7;
  511.                 border-radius: 4px;
  512.                 text-align: left;
  513.                 &::before {
  514.                   content: "";
  515.                   font-family: "element-icons";
  516.                   color: #C0C4CC;
  517.                   width: 30px;
  518.                   position: relative;
  519.                   top: -1px;
  520.                   line-height: 34px;
  521.                   text-align: center;
  522.                   display: inline-block;
  523.                 }
  524.               }
  525.               .select {
  526.                 position: relative;
  527.                 width: calc(100% - 12px);
  528.                 height: 36px;
  529.                 line-height: 36px;
  530.                 border: 1px solid #F0F2F7;
  531.                 border-radius: 4px;
  532.                 text-align: left;
  533.                 padding: 0 30px 0 10px;
  534.                 &::after {
  535.                   content: "";
  536.                   color: #C0C4CC;
  537.                   font-size: 14px;
  538.                   font-family: "element-icons";
  539.                   width: 25px;
  540.                   text-align: center;
  541.                   display: inline-block;
  542.                   position: absolute;
  543.                   right: 5px;
  544.                   top: 0;
  545.                   transform: rotate(180deg);
  546.                 }
  547.               }
  548.               .input {
  549.                 position: relative;
  550.                 width: calc(100% - 12px);
  551.                 height: 36px;
  552.                 line-height: 36px;
  553.                 border: 1px solid #F0F2F7;
  554.                 border-radius: 4px;
  555.                 text-align: left;
  556.                 padding: 0 10px;
  557.               }
  558.               .dialog {
  559.                 position: relative;
  560.                 width: calc(100% - 12px);
  561.                 height: 36px;
  562.                 line-height: 36px;
  563.                 border: 1px solid #F0F2F7;
  564.                 border-radius: 4px;
  565.                 text-align: left;
  566.                 padding: 0 10px;
  567.                 &::after {
  568.                   content: "";
  569.                   color: #C0C4CC;
  570.                   font-size: 14px;
  571.                   font-family: "element-icons";
  572.                   width: 25px;
  573.                   text-align: center;
  574.                   display: inline-block;
  575.                   position: absolute;
  576.                   right: 4px;
  577.                   top: 0;
  578.                 }
  579.               }
  580.             }
  581.             .table-form-item {
  582.               margin: 0;
  583.               .diff-tag {
  584.                 display: none;
  585.               }
  586.               /**.edit-tag {
  587.                 position: absolute;
  588.                 top: 0;
  589.                 left: 0;
  590.                 width: 8px!important;
  591.                 height: 0;
  592.                 border-left: 8px solid #1890ff;
  593.                 border-bottom: 5px solid #fff;
  594.                 z-index: 1;
  595.               }
  596.               &.is-error .edit-tag{
  597.                 border-left-color: #ff4949;
  598.               } */
  599.  
  600.               /** 错误 */
  601.               &.is-error .edit-border {
  602.                 background: #FFF7F5;
  603.                 border: 1px solid #F2B1A7;
  604.               }
  605.               &.diff{
  606.                 color: #ff4949;
  607.                 .diff-tag{
  608.                   display: block;
  609.                   position: absolute;
  610.                   top: 30px;
  611.                   left: 0;
  612.                 }
  613.  
  614.               }
  615.               .el-form-item__content{
  616.                 & >div >div{
  617.                   width: calc(100% - 14px);
  618.                   &.has-unit {
  619.                     width: 80%;
  620.                     float: left;
  621.                   }
  622.                   // .el-date-editor,.el-input {
  623.                   //   width: calc(100% - 12px);
  624.                   // }
  625.                   /*&.el-select .el-input input {
  626.                     height: 45px;
  627.                     line-height: 45px;
  628.                     border-radius: 0;
  629.                     border-color: #fff;
  630.                     padding: 0 30px 0 10px;
  631.                     &:focus {
  632.                       outline: none;
  633.                       border-color: #1890ff;
  634.                     }
  635.                   }
  636.                   &.el-input input {
  637.                     height: 45px;
  638.                     line-height: 45px;
  639.                     border-radius: 0;
  640.                     border-color: #fff;
  641.                     padding: 0 30px 0 10px;
  642.                     &:focus {
  643.                       outline: none;
  644.                       border-color: #1890ff;
  645.                     }
  646.                   }
  647.                   &.el-date-editor input {
  648.                     height: 45px;
  649.                     line-height: 45px;
  650.                     border-radius: 0;
  651.                     padding: 0 30px;
  652.                   }*/
  653.                 }
  654.                 .el-form-item__error{
  655.                   display: none;
  656.                   position: absolute;
  657.                   top: unset;
  658.                   bottom: 42px;
  659.                   left: 0;
  660.                   background-color: antiquewhite;
  661.                   z-index: 999999;
  662.                   width: 100%;
  663.                   padding: 10px;
  664.                   border-radius: 5px;
  665.                   line-height: 20px;
  666.                   &::after{
  667.                     content: "";
  668.                     height: 0;
  669.                     width: 0;
  670.                     border: 4px solid transparent;
  671.                     border-top-color: antiquewhite;
  672.                     position: absolute;
  673.                     top: 100%;
  674.                     right: 20px;
  675.                   }
  676.                 }
  677.               }
  678.             }
  679.           }
  680.           /** 复选框 */
  681.           &.el-table-column--selection .cell {
  682.             padding: 0 10px;
  683.           }
  684.         }
  685.  
  686.         .el-table__empty-block {
  687.           background-image: none;
  688.           min-height: 60px!important;;
  689.           margin-bottom: 0;
  690.           span {
  691.             bottom: 0;
  692.           }
  693.         }
  694.       }
  695.       ::v-deep .warning-row {
  696.         background: oldlace;
  697.       }
  698.  
  699.       ::v-deep .success-row {
  700.         background: #f0f9eb;
  701.       }
  702.     }
  703.     &.edit-table-disabled .edit-table {
  704.       ::v-deep .el-table__body-wrapper {
  705.         .el-table__cell .column-text .edit-border{
  706.           cursor: not-allowed;
  707.           background-color: #f9f9f9!important;
  708.           border-color: #f0f2f7;
  709.           color: #BBBBBB;
  710.         }
  711.       }
  712.     }
  713.   }
  714.   .no-btns {
  715.     .edit-table {
  716.       margin-top: 0;
  717.     }
  718.   }
  719. </style>

column.vue

  1. import Vue from 'vue';
  2. // import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
  3. // import ElCheckbox from 'element-ui/packages/checkbox';
  4. // import FilterPanel from './filter-panel.vue';
  5. // import LayoutObserver from './layout-observer';
  6. // import { mapStates } from './store/helper';
  7.  
  8. export default {
  9.   name: 'EditColumnRender',
  10.  
  11.   props: {
  12.     column: {
  13.       type: Object
  14.     },
  15.     scope: {
  16.       type: Object
  17.     },
  18.     store: {
  19.       type: Object
  20.       // required: true
  21.     },
  22.   },
  23.  
  24.   render(h) {
  25.     return (
  26.       <div>
  27.         {
  28.           this.column.renderTemp
  29.             ? this.column.renderTemp.call(this._renderProxy, h, { column: this.column, scope: this.scope, store: this.store, _self: this.$parent.$vnode.context })
  30.             : ''
  31.         }
  32.       </div>
  33.     );
  34.   },
  35.  
  36.   components: {
  37.     
  38.   },
  39.  
  40.   created() {
  41.     
  42.   },
  43.  
  44.   mounted() {
  45.   },
  46.  
  47.   beforeDestroy() {
  48.   },
  49.  
  50.   methods: {
  51.   },
  52.  
  53.   data() {
  54.     return {
  55.       draggingColumn: null,
  56.       dragging: false,
  57.       dragState: {}
  58.     };
  59.   }
  60. };

支持column-render.js ，支持render自定义列内容

  1. import Vue from 'vue';
  2. // import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
  3. // import ElCheckbox from 'element-ui/packages/checkbox';
  4. // import FilterPanel from './filter-panel.vue';
  5. // import LayoutObserver from './layout-observer';
  6. // import { mapStates } from './store/helper';
  7.  
  8. export default {
  9.   name: 'EditColumnRender',
  10.  
  11.   props: {
  12.     column: {
  13.       type: Object
  14.     },
  15.     scope: {
  16.       type: Object
  17.     },
  18.     store: {
  19.       type: Object
  20.       // required: true
  21.     },
  22.   },
  23.  
  24.   render(h) {
  25.     return (
  26.       <div>
  27.         {
  28.           this.column.renderTemp
  29.             ? this.column.renderTemp.call(this._renderProxy, h, { column: this.column, scope: this.scope, store: this.store, _self: this.$parent.$vnode.context })
  30.             : ''
  31.         }
  32.       </div>
  33.     );
  34.   },
  35.  
  36.   components: {
  37.     
  38.   },
  39.  
  40.   created() {
  41.     
  42.   },
  43.  
  44.   mounted() {
  45.   },
  46.  
  47.   beforeDestroy() {
  48.   },
  49.  
  50.   methods: {
  51.   },
  52.  
  53.   data() {
  54.     return {
  55.       draggingColumn: null,
  56.       dragging: false,
  57.       dragState: {}
  58.     };
  59.   }
  60. };

使用方法如下

我这里全局引用了，你也可以局部引用进来

  1. <edit-table
  2.           ref="editTable"
  3.           :empty-row="emptyRow"
  4.           :column-data="columnData"
  5.           :table-data.sync="tableData"
  6.           :table-rules="tableRules"
  7.           row-key="id"
  8.         ></edit-table>
  1. data() {
  2.     return {
  3.       symbolList: [
  4.         {label: '相似', value: "%%%"},
  5.         {label: '左相似', value: "%%"},
  6.         {label: '右相似', value: "%"},
  7.         {label: '大于', value: ">"},
  8.         {label: '大于等于', value: ">="},
  9.         {label: '等于', value: "="},
  10.         {label: '小于', value: "<"},
  11.         {label: '小于等于', value: "<="}
  12.       ],
  13.       relationList: [
  14.         {label: '并且', value: '&&'},
  15.         {label: '或者', value: '||'}
  16.       ],
  17.       columnData: [
  18.         { prop: 'name', type: 'selection' },
  19.         {
  20.           label: "列名",
  21.           prop: "queryColumn",
  22.           edit: true,
  23.           editType: "select",
  24.           selectData: {
  25.             label: "desc",
  26.             value: "value",
  27.             getData: () => {
  28.               return this.fields
  29.             }
  30.           },
  31.           format: (scope) => {
  32.             let current = this.fields.find(
  33.               (item) => item.value === scope.row.queryColumn
  34.             );
  35.             if (current) return current.desc;
  36.           }
  37.         },
  38.         {
  39.           label: "计算符",
  40.           prop: "querySymbol",
  41.           edit: true,
  42.           editType: "select",
  43.           selectData: {
  44.             label: "label",
  45.             value: "value",
  46.             getData: () => {
  47.               return this.symbolList
  48.             }
  49.           },
  50.           format: (scope) => {
  51.             let current = this.symbolList.find(
  52.               (item) => item.value === scope.row.querySymbol
  53.             );
  54.             if (current) return current.label;
  55.           }
  56.         },
  57.         { label: "值", prop: "queryValue", edit: true, editType: 'template', renderTemp: (h, {scope})=>{
  58.           return h(ColumnEdit, {
  59.               props: {
  60.                 column: 'queryValue',
  61.                 scope: scope
  62.               }
  63.             }
  64.           )
  65.         }},
  66.         {
  67.           label: "列关系",
  68.           prop: "queryRelation",
  69.           edit: true,
  70.           editType: "select",
  71.           selectData: {
  72.             label: "label",
  73.             value: "value",
  74.             getData: () => {
  75.               return this.relationList
  76.             }
  77.           },
  78.           format: (scope) => {
  79.             let current = this.relationList.find(
  80.               (item) => item.value === scope.row.queryRelation
  81.             );
  82.             if (current) return current.label;
  83.           }
  84.         },
  85.       ],
  86.       emptyRow: {
  87.         queryColumn: null,
  88.         querySymbol: null,
  89.         queryValue: null,
  90.         queryRelation: '&&'
  91.       },
  92.       tableData: [],
  93.       tableRules: {
  94.         queryColumn: [
  95.           { required: true, message: "列名不能为空", trigger: "change" },
  96.         ],
  97.         querySymbol: [
  98.           { required: true, message: "计算符不能为空", trigger: "change" },
  99.         ],
  100.         queryValue: [
  101.           { required: true, message: "值不能为空", trigger: "change" },
  102.         ],
  103.         queryRelation: [
  104.           { required: true, message: "列关系不能为空", trigger: "change" },
  105.         ],
  106.       },
  107.     };

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/201124
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号