iview table表格实现单击行选中

需求:保留点击复选勾选导出的情况下,新增点击当前行选中勾选

如图所示

iview table表格实现单击行选中_第1张图片

html

<Table  border stripe highlight-row ref="table" @on-row-click="selectRow"
	 :columns="tableColumns" :data="tableData" @on-selection-change="selectTable">
Table>

表格中添加on-row-click事件.并触发rowClick函数


methods: {
    selectTable(val) { // 表格选中项
      this.selectedRows = val
      console.log(this.selectedRows, '表格选中项')
    },
	selectRow(data, index) { // 单击某一行时触发
      // this.selectedRows.push(val) 这块是选中导出的数据
      this.$refs.table.toggleSelect(index)  // 重点 选中勾选
      console.log(data, '单击某一行时触发', index)
    },
}

你可能感兴趣的:(iview,ui,table,Vue,javascript,vue.js,javascript)