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(['1764553423457812482','1764554505948954626','1764555613891133441','1764555922562547714','1764556145296867330','1764555672267456514'])
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": "1764553423457812482",
      "field": "number",
      "fieldName": "单据编号",
      "fieldType": 1,
      "sort": 1
    },
    {
      "id": "1764554505948954626",
      "field": "projectName",
      "fieldName": "项目名称",
      "fieldType": 1,
      "sort": 2
    },
    {
      "id": "1764555672267456514",
      "field": "incomeExpensIllustrate",
      "fieldName": "收支说明",
      "fieldType": 1,
      "sort": 3
    },
    {
      "id": "1764555922562547714",
      "field": "incomeExpensDirection",
      "fieldName": "收支方向",
      "fieldType": 1,
      "sort": 4
    },
    {
      "id": "1764556145296867330",
      "field": "amount",
      "fieldName": "金额",
      "fieldType": 1,
      "sort": 5
    },
    {
      "id": "1764555613891133441",
      "field": "date",
      "fieldName": "日期",
      "fieldType": 1,
      "sort": 6
    },
    {
      "id": "1764556195016146946",
      "field": "projectNo",
      "fieldName": "项目编号",
      "fieldType": 0,
      "sort": 7
    },
    {
      "id": "1764554557526310913",
      "field": "projectBatch",
      "fieldName": "批次",
      "fieldType": 1,
      "sort": 8
    },
    {
      "id": "1764555970386001921",
      "field": "abstracts",
      "fieldName": "其他信息",
      "fieldType": 1,
      "sort": 9
    },
    {
      "id": "1764556083028230146",
      "field": "secondMotion",
      "fieldName": "附议信息",
      "fieldType": 0,
      "sort": 10
    },
    {
      "id": "1764556195016146945",
      "field": "operator",
      "fieldName": "操作人",
      "fieldType": 0,
      "sort": 11
    }
  ],
  "result": 0,
  "total": "0"
}