problem description
when you encapsulate the table component of elementui and cause the table to be too wide, the scroll bar displays, but dragging does not work
related codes
<template>
<div class="table-main-wrapper">
<el-table
:data="data"
:stripe="stripe"
:border="border"
:resizable="resizable"
style="width: 100%">
<el-table-column
v-for="(col, index) in columns"
:key="index"
:fixed="Default(col.fixed, true)"
:prop="col.prop"
:formatter="formatter"
:align="Default(col.align, "center")"
:label="col.label"
:width="Default(col.width, "120")">
</el-table-column>
<el-table-column v-if="opsbtns.length > 0"
:label="Default(column.label, "")"
:width="Default(column.width, "240")"
:align="Default(column.align, "center")"
:fixed="Default(column.fixed, true)">
<template slot-scope="scope">
<el-button
v-for="(btn, index) in opsbtns"
:key="index"
:type="Default(btn.type, "primary")"
:size="Default(btn.size, "mini")"
@click="operation(btn.ops, scope.$index, scope.row)"
>
{{btn.text}}
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script type="text/ecmascript=6">
import Logger from "chivy";
const log = new Logger("components/table/main");
export default {
name: "TableMain",
data() {
return {
Default: this.$tools.setDefault
};
},
props: {
data: {
type: Array,
default: []
},
stripe: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: true
},
resizable: {
type: Boolean,
default: true
},
//
columns: {
type: Array
},
//
column: {
type: Object,
default: () => {
return {};
}
},
opsbtns: {
type: Array,
default: () => {
return [
{type: "info", text: "", ops: "detail"},
{type: "primary", text: "", ops: "modify"},
{type: "danger", text: "", ops: "delete"}
]
}
}
},
methods: {
operation(ops, index, row) {
log.debug("ops is " + ops);
log.debug("index is " + index);
log.debug("row is " + JSON.stringify(row));
this.$emit("operations", {ops, index, row});
},
formatter(row, column, cellValue) {
return this.$tools.formatit(row, column, cellValue);
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.table-main-wrapper
height 100%
</style>
externally incoming data into the table, which is displayed as shown in figure
cannot drag the scroll bar at this time