vue split table component
Install
npm install vue-split-table
Attributes
| 参数 | 说明 | 类型 | 是否必传 | Default |
|---|
| headData | 表头内容 | Array | 必传 | - |
| bodyData | 表体内容 | Array | 必传 | - |
| checkFlag | 是否有复选列 | Boolean | 可选 | True |
| tableEditFlag | 表格是否可编辑 | Boolean | 可选 | True |
| operFlag | 是否有操作列 | Boolean | 可选 | True |
Events
| name | 说明 | 参数 |
|---|
| multipleData | 当选项发生变化触发 | multipleData |
| editData | 表格编辑文本框失焦触发 | editData |
Slot
| 事件名 | 说明 |
|---|
| operate | 配置操作列后就可通过设置slot来配置操作的内容 |
Example
<template>
<split-table :headData="headData" :bodyData="bodyData" @multipleData="multipleData" @editData="editData">
<template slot="operate" slot-scope="props">
<span @click="splitEdit(props.rowData)">修改</span>
<span @click="splitAdd(props.rowData)">新增</span>
<span @click="splitDel(props.rowData)">删除</span>
</template>
</split-table>
</template>
<script>
import SplitTable from 'vue-split-table';
export default {
components: { SplitTable },
data () {
return {
headData: ["城市", "美食", "好玩的地方"],
bodyData: [
{ city: "北京", food: "北京烤鸭", fun: ["故宫", "颐和园", "长城"] },
{
city: "深圳",food: ["肠粉", "牛肉火锅"],fun: ["西冲", "华侨城", "世界之窗"]
},
{
city: ["重庆", "成都", "武汉"],
food: ["重庆老火锅","重庆烤鱼","重庆小面","成都小吃","武汉热干面"],
fun: ["洪崖洞", "峨眉山", "黄鹤楼"]
}
],
}
},
methods: {
splitEdit(rowData) {
console.log("rowData值为", rowData);
},
editData(data) {
console.log("编辑所在行的值为", data);
},
splitAdd(data) {
console.log("新增所在行的值为", data);
},
splitDel(data) {
console.log("删除所在行的值为", data);
},
multipleData(data) {
console.log("复选框选择的值为", data);
}
}
}
</script>
project
项目中使用请戳