前端那些事20240201-前端那些事-avue2 表格行配置行单选

前端歌谣

于 2024-03-15 08:41:15 发布

阅读量421

点赞数 11

文章标签：前端

本文链接：https://blog.csdn.net/qq_41632427/article/details/135970005

版权

2024-vue2vue3-前端那些事专栏收录该内容

312 篇文章 1 订阅

订阅专栏

文章介绍了如何在使用Vue的CRUD组件时，实现表格中行的选中和取消功能，以及如何通过事件处理更新当前选中行并显示通知。

摘要由CSDN通过智能技术生成

<avue-crud ref="crud" :data="data" :option="option0" @current-row-change="handleCurrentRowChange"></avue-crud>
<div style="margin-top: 20px">
    <el-button @click="setCurrent(data[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
</div>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option0:{
          highlightCurrentRow:true,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
        setCurrent(row) {
          this.$refs.crud.setCurrentRow(row);
        },
        handleCurrentRowChange(val){
          this.$notify({
            showClose: true,
            message: '单选'+JSON.stringify(val),
            type: 'success',
          });
        }
    }
}
</script>