When the check box of the table is selected, the row's (input box time selector multi-select box, etc.) is unrestricted. Use the check box to restrict the table (input box time selector multi-select box, etc.) disabled

Case effect

When the check box of the table is selected, the row (input box, time selector, multi-select box, etc.) is unrestricted

<el-table
  :data="tableData"
  @selection-change="selectionChange"
>
<el-table-column
  prop="planFinishDate"
  width="150"
  label="计划完成时间"
>
  <template slot-scope="scope">
    <el-date-picker
      :disabled="!tableSelectedIds.includes(scope.row.id)"
      v-model="scope.row.planFinishDate"
      value-format="timestamp"
      :style="{
       
        width: '100%' }"
      placeholder="请选择"
      clearable
    ></el-date-picker>
  </template>
</el-table-column>

computed: {
    
    
    tableSelectedIds () {
    
    
      return this.tableSelected.map((it) => it.id)
    },
  },
methods: {
    
    
	selectionChange (val) {
    
    
     this.tableSelected = val
   },
}

tableSelected indicates the id of the currently selected row
tableSelectedIds to determine whether the row is selected or not, if it is selected, return true

Additional knowledge points

The Array.prototype.includes method returns a boolean value indicating whether an array contains the given value, similar to the includes method for strings.

parameter

1) The first parameter is the element to find

2) The second parameter indicates the starting position of the search, which is 0 by default. If the second parameter is negative, it indicates the position of the countdown, and if it is greater than the array length at this time (for example, the second parameter is -4, but the array length is 3), it will be reset to start from 0.

CSDN community "Creation Talents" activity, as long as you participate and create articles, you will have the opportunity to win official prizes: boutique calendars, new programmers magazines, come and participate! Link to https://bbs.csdn.net/topics/605272551