element-UI表格中多选框回显默认选中-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-UI表格中多选框回显默认选中。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、通过@selection-change="handleSelectionChange"获取勾选的数据
2、通过this.$refs.multipleTable.toggleRowSelection(row, true);将数据回显

注意：toggleRowSelection方法的row数据必须是从tableData中获取

初级表格

elementui多选框数据回显,elementui,vue.js,javascript

文章来源地址https://www.toymoban.com/news/detail-525313.html

<template>
  <div>
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column label="日期"
                       width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      selectionKeys: [1, 2],
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
    }
  },
  // 注意 toggleRowSelection 方法的 row 必须是从 tableData 中提出来的
  // 只有这样获取的 row 才能确定哪一行数据被勾选  涉及到复杂数据指向地址问题
  mounted () {
    const { selectionKeys, tableData } = this
    selectionKeys.forEach(key => {
      tableData.forEach(row => {
        if (row.id == key) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      })
    })

    // 错误示范  虽然数据一摸一样  但是指向地址不同  并不能视为同一条数据
    // let selectionRows = [{
    //   id: 1,
    //   date: '2016-05-03',
    //   name: '王小虎',
    //   address: '上海市普陀区金沙江路 1518 弄'
    // }, {
    //   id: 2,
    //   date: '2016-05-02',
    //   name: '王小虎',
    //   address: '上海市普陀区金沙江路 1518 弄'
    // }]
    // selectionRows.forEach(row => {
    //   this.$refs.multipleTable.toggleRowSelection(row, true);
    // })
  },
  methods: {
    handleSelectionChange (rows) {
      this.selectionKeys = rows.map(item => item.id);
      console.log(this.selectionKeys)
    },
  }
}
</script>
<style scoped lang="less">
</style>

到了这里，关于element-UI表格中多选框回显默认选中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！