96 lines
2.7 KiB
Vue
96 lines
2.7 KiB
Vue
|
<!--
|
|||
|
|
* @Descripttion: 表格选择器组件演示
|
|||
|
|
* @version: 1.0
|
|||
|
|
* @Author: sakya
|
|||
|
|
* @Date: 2021年6月8日09:29:14
|
|||
|
|
* @LastEditors: sakya
|
|||
|
|
* @LastEditTime: 2021年6月8日09:29:14
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-main>
|
|||
|
|
<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
|
|||
|
|
<el-card shadow="never" header="单选">
|
|||
|
|
<sc-table-select v-model="value2" :apiObj="apiObj" :params="params" :table-width="600" :props="props" @change="change">
|
|||
|
|
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
|||
|
|
<el-table-column prop="user" label="姓名"></el-table-column>
|
|||
|
|
</sc-table-select>
|
|||
|
|
</el-card>
|
|||
|
|
<div style="height:15px"></div>
|
|||
|
|
<el-card shadow="never" header="多选">
|
|||
|
|
<sc-table-select v-model="value" :apiObj="apiObj" :table-width="700" multiple clearable collapse-tags collapse-tags-tooltip :props="props" @change="change">
|
|||
|
|
<template #header="{form, submit}">
|
|||
|
|
<el-form :inline="true" :model="form">
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-select v-model="form.sex" placeholder="性别" clearable :teleported="false">
|
|||
|
|
<el-option label="男" value="1"></el-option>
|
|||
|
|
<el-option label="女" value="2"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-date-picker v-model="form.date" value-format="YYYY-MM-DD" type="date" placeholder="注册时间" :teleported="false"></el-date-picker>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="submit">查询</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
|
|||
|
|
</template>
|
|||
|
|
<el-table-column prop="id" label="ID" width="180"></el-table-column>
|
|||
|
|
<el-table-column prop="user" label="姓名" width="100"></el-table-column>
|
|||
|
|
<el-table-column prop="cip" label="最后请求IP" width="150"></el-table-column>
|
|||
|
|
<el-table-column prop="time" label="注册时间"></el-table-column>
|
|||
|
|
</sc-table-select>
|
|||
|
|
</el-card>
|
|||
|
|
</el-main>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'tableselect',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
apiObj: this.$API.demo.page,
|
|||
|
|
params: {
|
|||
|
|
name: 'demoName'
|
|||
|
|
},
|
|||
|
|
value: [
|
|||
|
|
{
|
|||
|
|
id: "410000199512025445",
|
|||
|
|
user: "魏磊"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "520000198407304275",
|
|||
|
|
user: "史平"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
value2: {
|
|||
|
|
id: "520000198407304275",
|
|||
|
|
user: "史平"
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
label: 'user',
|
|||
|
|
value: 'id',
|
|||
|
|
keyword: "keyword"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//值变化
|
|||
|
|
change(val){
|
|||
|
|
this.$message('change事件，返回详情查看控制台')
|
|||
|
|
console.log(val)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
</style>
|