vue-table-row-edit

---

当前版本：v2.0.13

更新日志

---

Install

npm install vue-table-row-edit --save

---

How to use

import Vue from 'vue'
import App from './App'
import VueTableRowEdit from 'vue-table-row-edit'
import 'vue-table-row-edit/dist/vue-table-row-edit.min.css'
 
Vue.use(ElementUI)
Vue.use(VueTableRowEdit)
 
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Table Attribute

参数	说明	类型	可选值	默认值
data	显示的数据	Array	---	---
type	表格类型，add为仅有添加功能	String	default/add	default
rules	表单验证规则	Object	---	---
add	是否显示新增按钮	Boolean	true/false	true
addLabel	新增字样	String	---	新增
operator	是否有操作列	Boolean	true/false	true
deleteFlag	是否有删除按钮、事件	Boolean	true/false	true
successFlag	是否有提交按钮、事件	Boolean	true/false	true
cancelFlag	是否有取消按钮、事件	Boolean	true/false	true
editFlag	是否有编辑按钮、事件	Boolean	true/false	true

Table Events

事件名	说明	回调参数
success	行内验证提交事件 ,回调(callback(true/false)) (成功)/(失败)	row,callback
edit	行内编辑点击事件 ,回调(callback(true/false)) (成功)/(失败)	row,callback
delete	行内删除事件 ,回调callback(true/false)(成功)/(失败)	row,callback
add	新增事件,回调callback(item),item为新增的行内对象	callback
validate	对整个表格的数据进行校验的方法	this.$refs[data].validate((validateState) => { if(validateState){ //验证通过 } })
resetFields	对整个表格的数据进行校验重置	this.$refs[data].resetFields();
selection-change	当选择项发生变化时会触发该事件	selection

Table Methods

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	---
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected

TableColumn Attribute

参数	说明	类型	可选值	默认值
type	对应的列类型，当type="operate"则写入到操作列中，当type="selection"则显示为多选框，当type="expand"则显示slot中的html	String	default/operate	default
prop	对应列内容的字段名	String	---	---
propType	对应列内容的字段类型,即行内编辑框的类型	String	input/date/number/select	input
label	显示的标题	String	---	---
options	当仅当propType='select'时使用，为下拉框数据	Array	---	---
props	当仅当propType='select'时使用,	Object	label:下拉框显示的字段，String； value:选择框选择的字段,String； labelProp:该列下不选择时需要显示的字段,String	{label:'label',value:'id',labelProp:false}
onlyShow	当前列是否仅为展示状态	Boolean	true/false	false
clearable	是否可以清空选项,当propType='number'时无效	Boolean	true/false	false
filterable	是否可搜索,当propType='select'时有用	Boolean	true/false	false
maxlength	最长长度	Number	---	50
minlength	最小长度	Number	---	0
max	最大值	Number	---	---
min	最小值	Number	---	---
placeholder	输入提示	Number	---	---
remote	远程搜索启动,仅propType="select"可用	Boolean	true/false	false
remoteMethod	远程搜索方法	Function	---	---
width	宽度设置	Number	---	80
if	是否显示	Boolean	---	true
selectionVisible	是否显示行内复选框，不传的情况下当type为selection时显示复选框	Function	---	---

TableColumn Events

事件名	说明	回调参数
change	值改变时触发	(value,row,item) value:选中的值，row:该行的数据，item:选择框选中的对象，仅在propType='select'时有值

Table-column Scoped Slot

名称	说明
---	自定义列的内容，参数为 {row, edit, $index, data}，edit为是否正在编辑中的状态Boolean类型

---

Example

<template>
    <xt-table
        :data="data"
        type="edit"
        :rules="rules"
        @success="handleSuccess"
        @delete="handleDelete"
        ref="data">
          <xt-table-column
          prop="name"
          label="姓名"
          propType="input">
          </xt-table-column>
          <xt-table-column
          prop="sex"
          propType="select"
          label="性别"
          :options="selectOptions"
          :props="{label:'name',value:'id',labelProp:'productName'}"
          filterable
          ></xt-table-column>
          <xt-table-column prop="sex"
            label="性别"
            :edit="true"
            propType="input"
            :options="selectOptions">
            <template slot-scope="scope" type="expand">
              <el-input v-model="scope.row.sex" size="mini"></el-input>
              <!--<el-input ></el-input>-->
            </template>
          </xt-table-column>
          <xt-table-column label="操作" type="operate">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handlePrint(scope.row)">打印</el-button>
              </template>
            </xt-table-column>
      </xt-table>
</template>

<script>
export default {
  name: 'app',
  components: {},
  data () {
    return {
      msg: '表格展示',
      data:[{id:1,name:'苏三',sex:'男',birth:'2003-01-05',hobby:'女',age:21},{id:2,name:'李四',sex:'男',birth:'2010-06-05',hobby:'唱歌',age:11}],
      selectOptions:[{name:'男',value:'男'},{name:'女',value:'女'}]
    }
  },
  methods:{
    handleAdd(callback){
      let item={name:'',sex:'',birth:'',hobby:'',age:0,isEdit:true}
      this.data.push(item);
      callback(item);
    },
    handleClick(row){
      console.log(row)
    },
    handleSuccess(row,callback){
        callback(true)
    },
    handleDelete(row,callback){
      callback(true)
    },
    handlePrint(row) {
      console.log(row, "打印");
    },
  }
</script>