行操作

TIP

1.0.0+

行单机

单机一行数据时回调row-click方法,同时返回当前行的row数据,event当前的操作对象,column当前列的属性

<avue-crud :data="data" :option="option" @row-click="handleRowClick"></avue-crud>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      };
    },
    methods: {
        handleRowClick (row, event, column) {
          this.$notify({
            showClose: true,
            message: '单机'+JSON.stringify(row),
            type: 'success',
          });
        },
    }
}
</script>

行双击

双击一行数据时回调row-dblclick方法,同时返回当前行的row数据,event当前的操作对象,column当前列的属性

<avue-crud :data="data" :option="option" @row-dblclick="handleRowDBLClick"></avue-crud>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    },
    methods: {
       handleRowDBLClick (row, event) {
        this.$notify({
          showClose: true,
          message: '双击'+JSON.stringify(row),
          type: 'success',
        });
      },
    }
}
</script>

行单选

单选一行数据时需要设置highlightCurrentRow属性为true,回调current-row-change方法,同时返回当前行的row数据,

<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,
          page:false,
          align:'center',
          menuAlign:'center',
          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>