ele-table表格列表內(nèi)雙擊編輯部分信息的示例代碼(el-table組件同理)
更新時間：2024年11月04日 11:59:51 作者：Fighting_p
本文介紹如何在ele-table組件中實現(xiàn)雙擊編輯功能,通過雙擊表格列表內(nèi)需要編輯的區(qū)域,可以展示輸入框或日期選擇器進行數(shù)據(jù)修改,修改完成后,通過按回車鍵或點擊確認按鈕提交修改數(shù)據(jù),感興趣的朋友一起看看吧
說明
ele-table 為公司內(nèi)部組件，重點看 【主要代碼】 部分代碼
ele-table表格列表內(nèi)：雙擊需要編輯的區(qū)域，編輯部分信息
實現(xiàn)
雙擊需要編輯的數(shù)據(jù)，展示輸入框/日期選擇，
展示輸入框：修改完之后，按鍵盤回車鍵，提交修改數(shù)據(jù)展示日期選擇：修改完之后，點擊 √ 按鈕，提交修改數(shù)據(jù)
頁面展示
代碼
<!-- 機動車巡查 -->
<template>
<div class="container">
<ele-form-search
class="container_search"
:form-data="searchData"
:form-desc="searchDesc"
@search="fetchData"
/>
<div class="container_btn">
<el-button class="el-icon-plus" type="primary" size="mini" @click="operationHandler('add')">
錄入
</el-button>
<el-button size="mini" @click="operationHandler('auto')">自動錄入設(shè)置</el-button>
<a href="/downloadCenter/核查處理通知書.docx" rel="external nofollow" >
<el-button size="mini">整改說明書下載</el-button>
</a>
</div>
<ele-table
class="contariner_table"
:table-options="options"
:columns-options="columns"
:page.sync="searchData.page"
:page-size.sync="searchData.rows"
:total="total"
:show-fixed-control="false"
>
<template #sffxwt="{ row }">
<el-switch
v-model="row.sffxwt"
active-color="#13ce66"
active-value="yes"
inactive-value="no"
@change="sffxwtChange($event, row)"
>
</el-switch>
</template>
<!-- 【主要代碼】 start -->
<template #czwt="{ row }">
<el-input
v-if="row.czwtIsEdit"
v-model="editValue"
placeholder="請輸入內(nèi)容"
size="mini"
@keyup.enter.native="dbClickSubmit('czwt', row)"
></el-input>
<span v-else @dblclick="dbClickEdit('czwt', row)">{{ row.czwt }}</span>
</template>
<template #ccrq="{ row }">
<div v-if="row.ccrqIsEdit" class="ccrq">
<el-date-picker
v-model="editValue"
type="date"
placeholder="選擇日期"
size="mini"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
/>
<el-button
type="text"
class="el-icon-check"
@click="dbClickSubmit('ccrq', row)"
></el-button>
</div>
<span v-else @dblclick="dbClickEdit('ccrq', row)">{{ row.ccrq }}</span>
</template>
<!-- 【主要代碼】 end -->
<template #operation="{ row }">
<el-button type="text" @click="detailHandler(row)">查看</el-button>
<el-button
:disabled="row.sffxwt === 'no'"
type="text"
@click="operationHandler('upload', row)"
>上傳</el-button
>
<el-button type="text" @click="operationHandler('issued', row)">下發(fā)</el-button>
</template>
</ele-table>
<DetailDialog ref="DetailDialogRef" @update="fetchData" />
<OperationDialog ref="OperationDialogRef" @update="fetchData" />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listPage, update } from '@/api/neimeng/vehicle-inspection-feedback'
import { searchDesc } from './constant/formList'
import { columns } from './constant/columns'
import DetailDialog from './components/DetailDialog'
import OperationDialog from './components/OperationDialog'
export default {
name: 'VehicleInspection',
components: { DetailDialog, OperationDialog },
filters: {},
data() {
return {
searchData: {
page: 1,
rows: 10
},
tableData: [],
total: 0,
editValue: ''
}
},
computed: {
...mapGetters(['glbmList']),
searchDesc() {
return searchDesc(this)
},
options() {
return {
data: this.tableData
}
},
columns() {
return columns(this)
}
},
watch: {},
created() {
this.fetchData()
},
methods: {
fetchData() {
let { time, ...params } = this.searchData
if (time && time.length) {
params.kssj = time[0]
params.jssj = time[1]
}
listPage(params).then((res) => {
this.common.CheckCode(res, null, () => {
this.tableData = res.data.rows || []
this.total = res.data.total || 0
})
})
},
sffxwtChange(val, row) {
update({
sffxwt: val,
id: row.id
}).then((res) => {
this.$common.CheckCode(res, null, () => {
this.fetchData()
})
})
},
/** ** 【主要代碼】 start ****/
getIndex(rowData) {
return this.tableData.findIndex((item) => item.id === rowData.id)
},
dbClickEdit(key, rowData) {
const isCanEdit = this.tableData.some((item) => {
if (item.ccrqIsEdit || item.czwtIsEdit) return true
})
if (isCanEdit) return this.$message.error('請先編輯完當前數(shù)據(jù)再編輯下一個')
this.editValue = key === 'ccrq' ? new Date(rowData[key]) : rowData[key]
this.tableData[this.getIndex(rowData)][key + 'IsEdit'] = true
this.renderDom()
},
dbClickSubmit(key, rowData) {
update({
[key]: this.editValue,
id: rowData.id
}).then((res) => {
this.$common.CheckCode(res, '修改成功', () => {
this.fetchData()
this.tableData[this.getIndex(rowData)][key + 'IsEdit'] = false
this.renderDom()
this.editValue = ''
})
})
},
renderDom() {
this.tableData.push({})
this.tableData.pop()
},
/** ** 【主要代碼】 end ****/
detailHandler(rowData) {
this.$refs.DetailDialogRef.open(rowData)
},
operationHandler(type, rowData) {
this.$refs.OperationDialogRef.open(type, rowData)
}
}
}
</script>
<style lang="scss" scoped>
.container {
height: calc(100% - 52px);
&_search {
padding: 10px;
margin-bottom: 10px;
::v-deep .el-form-item__content {
text-align: left;
}
}
&_btn {
background-color: #fff;
padding: 10px 10px 0;
text-align: left;
.el-icon-plus {
margin-bottom: 10px;
}
a {
margin-left: 10px;
}
}
.contariner_table {
height: calc(100% - 100px);
::v-deep .ele-table-pagination {
position: fixed;
bottom: 0;
justify-content: center;
z-index: 10;
}
.upload-demo {
display: inline-block;
}
.ccrq {
width: 100%;
display: inline-block;
::v-deep .el-date-editor {
width: calc(100% - 22px);
}
.el-icon-check {
padding: 0;
cursor: pointer;
font-size: 20px;
}
}
}
}
.blue-theme {
.container_btn {
background-color: #293f60;
color: #fff;
}
}
.night-theme {
.container_btn {
background-color: #1a2331;
color: #fff;
}
}
</style>./constant/formList.js
import { getToken } from '@/utils/auth'
const sffxwtOptions = [
{
value: 'yes',
text: '是'
},
{
value: 'no',
text: '否'
}
]
export const searchDesc = (_this) => {
return {
jczmc: {
type: 'input',
label: '監(jiān)測站名稱',
attrs: {
clearable: true
},
layout: 8
},
fzjg: {
type: 'input',
label: '盟市',
attrs: {
clearable: true
},
layout: 8
},
sffxwt: {
type: 'select',
label: '是否發(fā)現(xiàn)問題',
attrs: {
clearable: true
},
layout: 8,
options: sffxwtOptions
},
time: {
type: 'daterange',
label: '巡查時間',
attrs: {
clearable: true,
valueFormat: 'yyyy-MM-dd'
},
layout: 8
}
}
}
export const detailFormDesc = (_this) => {
return {
carInfo: {
hpzl: {
type: 'select',
label: '號牌種類',
layout: 8,
render: (h, content, value) => {
return <span>{_this.common.filter_dic('mon_business_hpzl', value)}</span>
}
},
hphm: {
type: 'input',
label: '號牌號碼',
layout: 8
},
jdczt: {
type: 'input',
label: '機動車狀態(tài)',
layout: 8
},
syr: {
type: 'input',
label: '所有人',
layout: 8
},
sfzmhm: {
type: 'input',
label: '身份證號',
layout: 8
},
lxfs: {
type: 'input',
label: '聯(lián)系方式',
layout: 8
},
zsxxdz: {
type: 'input',
label: '住址',
layout: 8
},
zzxxdz: {
type: 'input',
label: '暫住地址',
layout: 8
},
ccdjrq: {
type: 'input',
label: '初次登記日期',
layout: 8
},
yxqz: {
type: 'input',
label: '有效期止',
layout: 8
},
qzbfqz: {
type: 'input',
label: '強制報廢日期止',
layout: 8
},
yqjyqzbfqz: {
type: 'input',
label: '逾期檢驗強制報廢期止',
layout: 8
},
syq: {
vif: _this.drawerType === 'detail',
type: 'input',
label: '所有權(quán)',
layout: 8,
render: (h, content, value) => {
const cur = sffxwtOptions.find((i) => i.value === value)
return <span>{(cur && cur.text) || '暫無'}</span>
}
},
sqztmc: {
vif: _this.drawerType === 'detail',
type: 'input',
label: '申請狀態(tài)',
layout: 8
},
bz: {
vif: _this.drawerType === 'detail',
type: 'input',
label: '車輛備注信息',
layout: 8
}
},
applyInfo: {
clbz: {
type: 'input',
label: '車輛備注信息',
layout: _this.drawerType === 'apply' ? 24 : 8,
default: _this.carInfo.bz,
disabled: true
},
[_this.drawerType === 'apply' ? 'zrbm' : 'zrbmmc']: {
type: 'select',
label: '申請轉(zhuǎn)入部門',
layout: _this.drawerType === 'apply' ? 24 : 8,
required: true,
options: _this.glbmOptions,
prop: {
value: 'value',
text: 'label'
},
attrs: {
clearable: true
}
},
bz: {
type: 'textarea',
label: '申請備注',
layout: _this.drawerType === 'apply' ? 24 : 8,
attrs: {
clearable: true
}
},
cjr: {
vif: ['examineDetail', 'examine'].includes(_this.drawerType),
type: 'input',
label: '申請人',
layout: 8
},
sqbm: {
vif: ['examineDetail', 'examine'].includes(_this.drawerType),
type: 'input',
label: '申請人部門',
layout: 8
},
sqsj: {
vif: ['examineDetail', 'examine'].includes(_this.drawerType),
type: 'input',
label: '申請時間',
layout: 8
}
},
examineInfo: {
clyj: {
type: 'textarea',
label: '審核備注',
layout: _this.drawerType === 'examine' ? 24 : 16,
attrs: {
clearable: true
}
},
clr: {
vif: ['examineDetail'].includes(_this.drawerType),
type: 'input',
label: '審核人',
layout: 8
},
clsj: {
vif: ['examineDetail'].includes(_this.drawerType),
type: 'input',
label: '審核時間',
layout: 16
}
}
}
}
export const operationFormDesc = (_this) => {
return {
auto: {
lrpl: {
type: 'input',
label: '',
labelWidth: 0,
layout: 24
},
lrsl: {
type: 'input',
label: '',
labelWidth: 0,
layout: 24
}
},
issued: {
xfbm: {
type: 'select',
label: '下發(fā)部門',
layout: 24,
options: _this.glbmOptions,
prop: {
value: 'value',
text: 'label'
},
attrs: {
clearable: true
}
}
},
upload: {
zgsms: {
type: 'upload',
label: '上傳文件',
layout: 24,
attrs: {
// accept: 'image/*',
label: '上傳文件',
multiple: false,
autoUpload: true,
limit: 1,
// listType: 'picture-card',
blockSize: 'middle',
params: { relativePath: 'NMXCFile/' },
uploadAPI: '/supervise_basic/upload/oss/fileupload',
token: getToken(),
beforeUpload: _this.beforeUploadHandler,
'on-exceed': () => {
_this.$message('最多允許傳一個文件')
}
}
}
}
}
}./constant/columns.js
import moment from 'moment'
export const columns = (_this) => {
return [
{
type: 'index',
label: '序號',
index: (index) => {
return (_this.searchData.page - 1) * _this.searchData.rows + index + 1
}
},
{
prop: 'fzjg',
label: '盟市'
},
{
prop: 'lsh',
label: '流水號'
},
{
prop: 'jczmc',
label: '監(jiān)測站名稱'
},
{
prop: 'hphm',
label: '車牌號'
},
{
prop: 'cllx',
label: '車輛類型'
},
{
prop: 'sffxwt',
label: '是否發(fā)現(xiàn)問題'
},
{
prop: 'czwt',
label: '存在問題'
},
{
prop: 'ccrq',
label: '抽查日期'
},
{
prop: 'operation',
label: '操作',
fixed: 'right',
width: 150
}
]
}到此這篇關(guān)于ele-table表格列表內(nèi)，雙擊編輯部分信息（el-table組件同理）的文章就介紹到這了,更多相關(guān)ele-table表格雙擊編輯信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript中Date對象應(yīng)用之簡易日歷實現(xiàn)
這篇文章主要為大家詳細介紹了javascript中Date對象應(yīng)用之簡易日歷實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
eval的作用其實很簡單，就是把一段字符串傳遞給JS解釋器，由Javascript解釋器將這段字符串解釋成Javascript代碼，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
用 js操作html標簽的一些代碼，大家可以運行后查看效果2008-11-11
jquery $(document).ready()和window.onload的區(qū)別淺析
這篇文章主要介紹了jquery $(document).ready()和 window.onload的區(qū)別淺析,本文總結(jié)了執(zhí)行時間、編寫個數(shù)不同、簡化寫法等不同的地方,需要的朋友可以參考下2015-02-02
JavaScript中的作用域與閉包、原型與原型鏈、異步與單線程
JavaScript的三座大山指的是:作用域和閉包、原型和原型鏈、異步與單線程,這些概念在日常的開發(fā)工作中經(jīng)常被提及,并對我們理解和編寫高質(zhì)量的JavaScript代碼至關(guān)重要2024-02-02
這篇文章主要給大家介紹了關(guān)于js陀螺儀的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習或者使用js具有一定的參考學(xué)習價值，需要的朋友們下面來一起學(xué)習學(xué)習吧2019-04-04
這篇文章主要為大家詳細介紹了hammer.js實現(xiàn)圖片手勢放大效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要給大家介紹了關(guān)于JavaScript類型檢測的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2021-04-04
這篇文章主要為大家詳細介紹了js驗證框架之RealyEasy驗證，記錄了RealyEasy驗證的使用步驟，感興趣的小伙伴們可以參考一下2016-06-06
js實現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動廣告條代碼
這篇文章主要介紹了js實現(xiàn)網(wǎng)站最上邊可關(guān)閉的浮動廣告條代碼,涉及javascript基于鼠標事件操作頁面元素樣式的實現(xiàn)技巧,需要的朋友可以參考下2015-09-09