VUE easytable模板，可以处理长字符

迷路的老虎LH

已于 2023-10-14 17:36:55 修改

阅读量108

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-10-14 17:35:09 首次发布

本文链接：https://blog.csdn.net/hello_qaz123/article/details/133827894

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文档
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 });
            },
	},
})