vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中

vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中

效果

代码

index.vue

<!-- @Description 基金项目管理 - 基础设置 - 元数据维护 @author wdd @date 2023/10/31 --> <template> <div class="content"> <div class="set-box"> <el-table row-key="id" :header-cell-style="{ background: '#eef1f6' }" ref="tableRef" :data="metaTableData" class="table" @selection-change="handleSelectionChange"> <el-table-column type="selection" :selectable="isRow" width="50" align="center"></el-table-column> <el-table-column prop="fieldName" align="center" label="元数据名称"></el-table-column> <el-table-column prop="field" width="220" align="center" label="英文字段"></el-table-column> </el-table> <div> <el-button type="primary" size="default" @click="sureSubmit">提交</el-button> </div> </div> </div> </template> <script lang="ts" setup> import { ref,nextTick, inject} from 'vue'; import { ElMessage, ElMessageBox } from 'element-plus' import { post } from "@/utils/path.js"; const constant = inject('constant') const tableRef = ref() const metaTableData = ref([]) // 列表数据 const selectionList = ref([]) const getList = () => { post(constant.fundShowData + '/finance/template/field/get', ).then((res) => { const { code, data } = res.data if (code == '200') { metaTableData.value = data metaTableData.value.forEach(row=>{ // fieldType 选中标识 0-未选中 1-选中 if (row.fieldType == 1) { selectionList.value.push(row) nextTick(()=>{ tableRef.value.toggleRowSelection(row, true) // true为选中 }) } row.fieldType = 0 }) } }) } getList() // 多选 const handleSelectionChange = (val) => { selectionList.value = val; } // 禁用选项 const okLists = ref(['','','','','','']) const isRow=(row:any,rowIndex:any)=>{ return !okLists.value.includes(row.id) } // 提交 const sureSubmit = () => { selectionList.value.forEach(el=>{ metaTableData.value.forEach(item=>{ if(item.id == el.id){ item.fieldType = 1 } }) }) post(constant.fundShowData +'/finance/template/field/update', metaTableData.value).then((res) => { const { code, data } = res.data if (code == '200') { ElMessage.success("提交成功") getList() } }) } </script> <style lang="scss" scoped> .content { margin-top: 20px; margin-right: 20px; width: 100%; .set-box { margin: 20px 0; width: 60%; padding-left: 16px; } .el-button { float: right; margin-bottom: 10px; } .el-table { margin: 20px 0; } } </style> 

接口

data.json

{ 
    "success": true, "code": "200", "message": "操作成功", "data": [ { 
    "id": "", "field": "number", "fieldName": "单据编号", "fieldType": 1, "sort": 1 }, { 
    "id": "", "field": "projectName", "fieldName": "项目名称", "fieldType": 1, "sort": 2 }, { 
    "id": "", "field": "incomeExpensIllustrate", "fieldName": "收支说明", "fieldType": 1, "sort": 3 }, { 
    "id": "", "field": "incomeExpensDirection", "fieldName": "收支方向", "fieldType": 1, "sort": 4 }, { 
    "id": "", "field": "amount", "fieldName": "金额", "fieldType": 1, "sort": 5 }, { 
    "id": "", "field": "date", "fieldName": "日期", "fieldType": 1, "sort": 6 }, { 
    "id": "", "field": "projectNo", "fieldName": "项目编号", "fieldType": 0, "sort": 7 }, { 
    "id": "", "field": "projectBatch", "fieldName": "批次", "fieldType": 1, "sort": 8 }, { 
    "id": "", "field": "abstracts", "fieldName": "其他信息", "fieldType": 1, "sort": 9 }, { 
    "id": "", "field": "secondMotion", "fieldName": "附议信息", "fieldType": 0, "sort": 10 }, { 
    "id": "", "field": "operator", "fieldName": "操作人", "fieldType": 0, "sort": 11 } ], "result": 0, "total": "0" } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10690.html