You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.9 KiB
120 lines
2.9 KiB
<template>
|
|
<el-table
|
|
:data="tableData"
|
|
size="medium"
|
|
fit
|
|
:header-cell-style="{
|
|
height: '40px',
|
|
padding: '0',
|
|
background: '#f7f9fa',
|
|
'font-size': '16px',
|
|
color: '#8590a6',
|
|
}"
|
|
ref="multipleTable"
|
|
@sort-change="handleSort"
|
|
highlight-current-row
|
|
@filter-change="filterHandler"
|
|
@row-click="handleRowClick"
|
|
>
|
|
<el-table-column
|
|
v-for="(th, key) in tableHeader"
|
|
:key="key"
|
|
:prop="th.prop"
|
|
:label="th.label"
|
|
:fixed="th.fixed"
|
|
:sortable="th.sortable ? 'custom' : false"
|
|
:filters="th.filters"
|
|
:column-key="th.columnKey"
|
|
:filtered-value="th.filteredValue"
|
|
:filter-multiple="th.filterMultiple"
|
|
:min-width="th.minWidth"
|
|
>
|
|
<template slot-scope="scope">
|
|
<ex-slot
|
|
v-if="th.render"
|
|
:render="th.render"
|
|
:row="scope.row"
|
|
:index="scope.$index"
|
|
:column="th"
|
|
/>
|
|
|
|
<span v-else>{{ scope.row[th.prop] || "" }}</span>
|
|
</template>
|
|
<template>
|
|
<el-tag
|
|
class="move"
|
|
style="cursor: move; margin-left: 15px"
|
|
draggable="true"
|
|
>
|
|
<i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</template>
|
|
|
|
<script>
|
|
// 自定义内容的组件
|
|
var exSlot = {
|
|
functional: true,
|
|
props: {
|
|
row: Object,
|
|
render: Function,
|
|
index: Number,
|
|
column: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
},
|
|
render: (h, data) => {
|
|
const params = {
|
|
row: data.props.row,
|
|
index: data.props.index,
|
|
};
|
|
if (data.props.column) params.column = data.props.column;
|
|
return data.props.render(h, params);
|
|
},
|
|
};
|
|
export default {
|
|
name: "comp-table",
|
|
components: { exSlot },
|
|
props: {
|
|
// 表格数据
|
|
tableData: {
|
|
type: Array,
|
|
default: function () {
|
|
return [];
|
|
},
|
|
},
|
|
// 表头数据
|
|
tableHeader: {
|
|
type: Array,
|
|
default: function () {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
// 排序事件
|
|
handleSort(sort) {
|
|
this.$emit("sort-events", sort);
|
|
},
|
|
// 筛选事件
|
|
filterHandler(filters) {
|
|
this.$emit("filter-events", filters);
|
|
},
|
|
// 某一行被点击
|
|
handleRowClick(row) {
|
|
// 点击选中是的颜色改变我给你看文档吧? 你这不是可以是的但是那个我用封装的就不行那边那个
|
|
// 你封装的那个js文件在哪里没有JS就是封装成组件调用
|
|
// 你现在是哪里不行 现在效果不是出来了?是的row可以传递过去拿的到你点击列表看看
|
|
// 你看我点击了哪个row那边传过去了 然后呢就选中效果没显示这一个问题背景没变
|
|
|
|
this.$refs.multipleTable.setCurrentRow(row);
|
|
// multipleTable.
|
|
console.log("row", row);
|
|
this.$emit("clickevents", row);
|
|
},
|
|
},
|
|
};
|
|
</script>
|