表格多选与单选

【多选】
渲染的表格数据需要多选,并且翻到下一页时,保留前一页所选择的内容。
组件中支持这种模式下的状态保留以及筛选条件。

  
        
  
  data() {
    return {
      getRowKeys(row) {
        return row.id;
      },
      selectedData: [],
      objtable:[] 
      }
   }
 handleSelectionChange(rows) {
      this.selectedData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.selectedData.push(row.id);
          }
        });
      }
      // console.log(this.selectedData);
    },

handleSelectionChange多选事件,selectedData存储所选数据,getRowKeys返回所取对象中的某属性值,objtable列表数据。

【单选】
表格的单选中,组件只提供了单选之后用色块来显示,这样用户体验效果不是很好。
可以在选中之后增加一个单选框来显示选中的效果,使得选中的一行展示更加明显。


        
          
        

 data() {
    return {
      theradio:'',
      masterdata:[] 
      }
   }
 JoinshowRow(row) {
      this.theradio = this.masterdata.indexOf(row);
    },
masterchoose(val) {
      this.currentRow = val;
    },

theradio单选框的状态,JoinshowRow展示单选框当前状态,masterchoose获取所选行的数据,masterdata为列表数据。

你可能感兴趣的:(表格多选与单选)