文档
http://huangshuwei.gitee.io/vue-easytable/#/zh/doc/intro
Vue.component('xx-tab-easytable',{
props: {
tableData:[],
columns:{
default:[
]
},
showbutton:{
default:{
"addShow":false,
"deleteShow":false,
"editShow":false,
"selectShow":false,
}
},
overflowflag:{
type:Boolean,
default:true
},
zzytablefrom:{
default:"xxxtablefrom-white",
},
rowKeyField:{
default:"id",
},
cellSelectionOption:{
type:Boolean,
default:false,
},
editOption:{
default:{}
},
virtualScrollOption: {
default:{
// 是否开启
enable: false,
}
},
checkboxOption: {
default:{
// 行选择改变事件
selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
//console.log(row, isSelected, selectedRowKeys);
},
// 全选改变事件
selectedAllChange: ({ isSelected, selectedRowKeys }) => {
//console.log(isSelected, selectedRowKeys);
},
}
},
},
emits: ['selectedOrderChanged', 'sendMsg'], // 切换工单
template: `
<div class="xxxtablefrom" :class="{xxxtablefromoverflow:overflowflag}" style = "margin:15px 0 0 0;" >
<ve-table
:virtual-scroll-option="virtualScrollOption"
:rowKeyFieldName="rowKeyField"
:columns="columns"
:table-data="tableData"
:editOption="editOption"
:cell-selection-option="cellSelectionOption"
:style="{'word-break':'break-all'}"
:border-around="true"
:border-x="true"
:border-y="true"
:checkbox-option="checkboxOption"
/>
<div v-show="tableData.length === 0" class="empty-data">暂无数据</div>
</div>
`,
data() {
return {
//editable:false,
selectionList: [],
// edit option 可控单元格编辑
rowStyleOption: {
clickHighlight: false,
hoverHighlight: false,
},
};
},
mounted() {
},
methods: {
// start editing cell
startEditingCell(rowKey, colKey, defaultValue) {
this.$refs["tableRef"].startEditingCell({ rowKey, colKey, defaultValue });
},
},
})